appendChild仅在第一次工作

Question

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

我遇到的问题是它只能在第一次使用。 完全是我第一次想要的，但是随后的按键操作却无济于事。 我有点a，似乎在第一次追加之后，“ 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/

Answer 2

我认为 appendChild实际上会移动 firstChild ，而不是克隆它。 要克隆它，你可以使用cloneNode的方法firstChild第一，或得到该HTML firstChild ，然后再使用innerHTML将其追加。