appendChild 仅在第一次有效

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

我遇到的问题是它只能在第一次使用。它第一次完全按照我想要的方式执行，然后在后续按下按钮时无法执行任何操作。我查了一下，似乎在第一个追加之后，“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);
    }
}

这是因为 DOM 节点只能存在于 DOM 中的一处。你打电话时lineitems.appendChild(newstuff.firstChild)，它将其从原始位置删除并将其添加到新位置。这意味着它只能工作一次。

话虽这么说，这会像您想要的那样重复添加标记：

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

See http://jsfiddle.net/LAKkQ/