1. 程式人生 > >JavaScript中 appendChild追加子節點無效的解決辦法

JavaScript中 appendChild追加子節點無效的解決辦法

有這麼一段程式碼:

let divs = document.getElementsByClassName('test');
let btn = document.createElement('div');

for(let i=0;i<divs.length;i++){
    divs[i].appendChild(btn);
}

表面上這段程式碼為每個 class屬性為 test的元素新增一個 div子元素。

看起來沒有什麼問題,但是執行完之後卻發現子元素並沒有成功新增,也沒有報錯。

這其實是因為一個元素只能有一個父元素,上面這段程式碼試圖將 btn新增到多個元素中。

而這與一個元素只能有一個父元素相矛盾,自然就新增不了。

解決辦法也很簡單,就是將 btn的宣告語句放到迴圈裡面去,這樣每次新增的 btn都是不同的元素,自然也就沒有上面的問題了。

程式碼如下:

let divs = document.getElementsByClassName('test');

for(let i=0;i<divs.length;i++){
    let btn = document.createElement('div');
    divs[i].appendChild(btn);
}