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