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/

Answer 2

我认为 appendChild实际上移动 firstChild，而不是克隆它。要克隆它，您可以先在firstChild上使用cloneNode方法，或者获取firstChild的HTML，然后再次使用innerHTML进行追加。

appendChild仅适用于第一次

2 个答案: