appendChild只能第一次工作

我想通过同一页面上的按钮和事件处理程序将相同的东西重复追加到元素。appendChild只能第一次工作

我遇到的问题是它只能第一次工作。它完全符合我第一次想要的，然后在后续的按键操作中无法做任何事情。我有点po and，似乎在第一次追加后，“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); 
    } 
}

来源

2012-01-24 user1060770

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

话虽这么说，像你想这会反复添加标记：

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

见http://jsfiddle.net/LAKkQ/

来源

2012-01-24 01:51:49 SoWeLie

感谢您的信息，但是您的代码锁似乎锁定了Chromium。 – user1060770

我想你可能会混淆你的变量或其他东西。我测试了代码，并且在Chrome中运行正常，请参阅http://jsfiddle.net/LAKkQ/。 – SoWeLie

这不是变数，但我不太确定问题是什么。无论哪种方式，我都有你的方法工作。这种方法比下面描述的有什么优点吗？我更喜欢这个笨拙的DOM抽象层。 – user1060770

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

来源

2012-01-24 01:53:33 mpen

appendChild只能第一次工作

回答

相关问题