JS中appendChild追加子節(jié)點無效的解決方法
JS中appendChild追加子節(jié)點無效
有這么一段代碼：
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子元素。
看起來沒有什么問題，但是執(zhí)行完之后卻發(fā)現(xiàn)子元素并沒有成功添加，也沒有報錯。
這其實是因為一個元素只能有一個父元素，上面這段代碼試圖將 btn添加到多個元素中。
而這與一個元素只能有一個父元素相矛盾，自然就添加不了。
解決辦法也很簡單，就是將 btn的聲明語句放到循環(huán)里面去，這樣每次添加的 btn都是不同的元素，自然也就沒有上面的問題了。
代碼如下：
let divs = document.getElementsByClassName('test');
for(let i=0;i<divs.length;i++){
let btn = document.createElement('div');
divs[i].appendChild(btn);
}
附：JS原生追加子節(jié)點
var fragment = document.createDocumentFragment();
li = document.createElement('li');
li.className = "xxx";
fragment.appendChild(li);
document.getElementById("xx").appendChild(fragment);
如上，需要先原生創(chuàng)建節(jié)點，節(jié)點內(nèi)容成為了document的一部分才能appendchild，
如果直接 appendchild（“<div></div>”）是不可以的，
因為appendChild(Node)這個 方法一般是在指定元素節(jié)點的最后一個子節(jié)點之后添加節(jié)點
但如果Node是頁面中的DOM對象，那么就不是添加節(jié)點了，就是直接Move節(jié)點。
appendChild你可以理解為移動一個元素。如果想復制一份過去，要事先clone
但是不管怎樣，這個node需要先存在，
append()前面是要選擇的對象，后面是要在對象內(nèi)插入的元素內(nèi)容
appendTo()前面是要插入的元素內(nèi)容且為Jquery對象，而后面是要選擇的對象
實例：
$('#a').append('content');
$('<div>content</div>').appendTo($('#a'));
//注意appendTo前面一定要是Jquery對象。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
- 初學js插入節(jié)點appendChild insertBefore使用方法
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明
- js中AppendChild與insertBefore的用法詳細解析
- 走馬燈效果代碼js appendChild實現(xiàn)的無縫滾動
- js原生appendChild的bug解決心得分享
- js AppendChild與insertBefore用法詳細對比
- javascript appendChild,innerHTML,join性能比較代碼
- javascript使用appendChild追加節(jié)點實例
- js利用appendChild對<li>標簽進行排序的實現(xiàn)方法
相關(guān)文章
JavaScript?內(nèi)置對象?BigInt詳細解析
這篇文章主要介紹了JavaScript?內(nèi)置對象?BigInt詳細解析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
我們都知道只有正確引用路徑,Typescript才不會提示報錯,這篇文章主要給大家介紹了關(guān)于typescript路徑別名問題詳解與前世今生的故事,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了JavaScript注冊時密碼強度校驗代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JS如何在數(shù)組指定位置插入元素,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
indexOf()?方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下2023-02-02
怎么去判斷一個數(shù)據(jù)屬于哪個數(shù)據(jù)類型,這個是很常見的操作,我們一般都會想到typeof和instanceof這兩個常見的方法,但有時候這兩種方法并不能滿足我們的需求,下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)據(jù)類型的正確判斷方法,需要的朋友可以參考下2021-08-08
面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解
這篇文章主要為大家介紹了判斷元素是否在可視區(qū)域中IntersectionObserver面試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
Webpack實現(xiàn)按需打包Lodash的幾種方法詳解
這篇文章主要給大家介紹了關(guān)于Webpack實現(xiàn)按需打包Lodash的幾種方法，文中介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要介紹了js淡入淡出的圖片輪播切換特效，圖片可以隨意替換，文中示例代碼介紹的非常詳細，具有一定的參考價值，推薦給大家，感興趣的小伙伴們可以參考一下2015-08-08
全面理解面向?qū)ο蟮?JavaScript(來自ibm)
要掌握好?JavaScript，首先一點是必須摒棄一些其他高級語言如?Java、C#?等類式面向?qū)ο笏季S的干擾，全面地從函數(shù)式語言的角度理解?JavaScript?原型式面向?qū)ο蟮奶攸c2013-11-11