appendChild работает только в первый раз - PullRequest
Новая
       5

appendChild работает только в первый раз

0 голосов
/ 24 января 2012

Я хочу многократно добавлять один и тот же материал к элементу с помощью кнопки и обработчика событий на одной и той же странице.

Проблема, с которой я сталкиваюсь, заключается в том, что она работает только в первый раз.Он делает именно то, что я хочу в первый раз, а затем ничего не делает при последующих нажатиях кнопок.Я немного поболтал, и кажется, что после первого добавления "newstuff.innerHTML" очищается.После долгих бесполезных поисков я решил прийти и спросить здесь.

Обработчик событий запускается, добавляется innerHTML переменной, но я не могу до конца жизни понять, почему моя переменнаябыть разбитым.

Переменные и данные ниже были изменены, чтобы защитить невинных. 

var button = document.getElementById('add_stuff');
var oldstuff = document.getElementById('element_id');
var newstuff = document.createElement('div');
newstuff.innerHTML = "<p>Super interesting content</p>";
button.onclick = function(event) {
    while (newstuff.firstChild) {
        oldstuff.appendChild(newstuff.firstChild);
    }
}

Ответы [ 2 ]

1 голос
/ 24 января 2012

Это потому, что узел DOM может существовать только в одном месте в DOM. Когда вы звоните lineitems.appendChild(newstuff.firstChild), он удаляет его из исходного места и добавляет его в новое место. Это означает, что он будет работать только один раз.

Как говорится, это будет многократно добавлять разметку, как вы хотите: 

button.onclick = function(event) {
    lineitems.innerHTML += newstuff.innerHTML;
};

См. http://jsfiddle.net/LAKkQ/

0 голосов
/ 24 января 2012

Я думаю appendChild на самом деле переместится firstChild, а не клонирует его.Чтобы клонировать его, вы можете сначала использовать метод cloneNode для firstChild или получить HTML-код для firstChild, а затем снова использовать innerHTML, чтобы добавить его.

...