javascript - appendChild 只在第一次工作

Question

我想通过同一页面上的按钮和事件处理程序将相同的内容重复附加到元素。

我遇到的问题是它只在第一次有效。它第一次做的正是我想要的，然后在随后的按钮按下时什么也做不了。我查了一下，似乎在第一次追加之后，“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);
    }
}

Answer 1

这是因为一个DOM节点只能存在于DOM中的一个地方。当您调用 lineitems.appendChild(newstuff.firstChild) 时，它会将其从原始位置移除并将其添加到新位置。这意味着它只会工作一次。

话虽如此，这会重复添加您想要的标记:

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

参见 http://jsfiddle.net/LAKkQ/