JS中appendChild追加子節(jié)點(diǎn)無(wú)效的解決方法
JS中appendChild追加子節(jié)點(diǎn)無(wú)效
有這么一段代碼：
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子元素。
看起來(lái)沒(méi)有什么問(wèn)題，但是執(zhí)行完之后卻發(fā)現(xiàn)子元素并沒(méi)有成功添加，也沒(méi)有報(bào)錯(cuò)。
這其實(shí)是因?yàn)橐粋€(gè)元素只能有一個(gè)父元素，上面這段代碼試圖將 btn添加到多個(gè)元素中。
而這與一個(gè)元素只能有一個(gè)父元素相矛盾，自然就添加不了。
解決辦法也很簡(jiǎn)單，就是將 btn的聲明語(yǔ)句放到循環(huán)里面去，這樣每次添加的 btn都是不同的元素，自然也就沒(méi)有上面的問(wèn)題了。
代碼如下：
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是頁(yè)面中的DOM對(duì)象，那么就不是添加節(jié)點(diǎn)了，就是直接Move節(jié)點(diǎn)。
appendChild你可以理解為移動(dòng)一個(gè)元素。如果想復(fù)制一份過(guò)去，要事先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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(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使用說(shuō)明
- js中AppendChild與insertBefore的用法詳細(xì)解析
- 走馬燈效果代碼js appendChild實(shí)現(xiàn)的無(wú)縫滾動(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)文章
SVG(可縮放矢量圖形)，接下來(lái)將介紹下如何判斷瀏覽器是否支持SVG,感興趣的朋友可以參考下哈，希望本代碼對(duì)你有所幫助2013-03-03
uni-app登錄與支付功能實(shí)現(xiàn)三秒后自動(dòng)跳轉(zhuǎn)
這篇文章主要介紹了uni-app:登錄與支付-- 三秒后自動(dòng)跳轉(zhuǎn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
JavaScript中使用Spread運(yùn)算符的八種方法總結(jié)
這篇文章主要給大家介紹了JavaScript中使用Spread運(yùn)算符的八種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JavaScript中的標(biāo)簽語(yǔ)句用法分析
這篇文章主要介紹了JavaScript中的標(biāo)簽語(yǔ)句用法,實(shí)例分析了標(biāo)簽語(yǔ)句的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
有本經(jīng)典的書(shū)叫《設(shè)計(jì)模式》，講了經(jīng)典的21種設(shè)計(jì)模式，建議大家都看看2013-11-11
javascript刪除一個(gè)html元素節(jié)點(diǎn)的方法
這篇文章主要介紹了javascript刪除一個(gè)html元素節(jié)點(diǎn)的方法,可通過(guò)獲取父節(jié)點(diǎn)再查找并刪除子節(jié)點(diǎn)來(lái)實(shí)現(xiàn)該功能,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
BootStrap Table 后臺(tái)數(shù)據(jù)綁定、特殊列處理、排序功能
本節(jié)主要介紹Bootstrap的后臺(tái)數(shù)據(jù)綁定、特殊列處理及列的排序功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-05-05
這篇文章主要介紹了微信小程序拖拽排序列表的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
JavaScript 短路運(yùn)算的實(shí)現(xiàn)
本文主要介紹了JavaScript 短路運(yùn)算的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
ExtJs使用自定義插件動(dòng)態(tài)保存表頭配置(隱藏或顯示)
這篇文章主要介紹了ExtJs使用自定義插件動(dòng)態(tài)保存表頭配置(隱藏或顯示) ,需要的朋友可以參考下2018-09-09