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只能第一次工作

回答

相關問題