您好,登錄后才能下訂單哦!
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對象。
總結
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。