js原生appendChild的bug解決心得分享
更新時間：2013年07月01日 17:00:53 作者：
appendChild主要是用來追加節(jié)點插入到最后；循環(huán)的時候由于不停的搬家導致length 在改變，改用for的話開始的length已經(jīng)被固定，問題就解決啦
appendChild 主要是用來追加節(jié)點 插入到最后
window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
ul2.appendChild(oli[i]);
}
}
<h3>講Id為ul1的內(nèi)容插入到ul2里面</h3>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="ul2">
</ul>
把ul1內(nèi)容插入到ul2里面，這個其實是搬家而不是復制 這個要切記
可以查看一下效果
為什么會出現(xiàn)這樣的效果 是因為 循環(huán)的時候 由于不停的搬家 導致length 在改變 如果用for的話 這樣開始的length 已經(jīng)被固定啦 所以出現(xiàn)問題，所以說要改成
while(oli.length){
ul2.appendChild(oli[0]);
}
這樣的都是插入第一條 所以就成功啦 大家可以試試
復制代碼 代碼如下:
window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
ul2.appendChild(oli[i]);
}
}
<h3>講Id為ul1的內(nèi)容插入到ul2里面</h3>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="ul2">
</ul>
把ul1內(nèi)容插入到ul2里面，這個其實是搬家而不是復制 這個要切記
可以查看一下效果
為什么會出現(xiàn)這樣的效果 是因為 循環(huán)的時候 由于不停的搬家 導致length 在改變 如果用for的話 這樣開始的length 已經(jīng)被固定啦 所以出現(xiàn)問題，所以說要改成
復制代碼 代碼如下:
while(oli.length){
ul2.appendChild(oli[0]);
}
這樣的都是插入第一條 所以就成功啦 大家可以試試
您可能感興趣的文章:
- 初學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與insertBefore用法詳細對比
- javascript appendChild,innerHTML,join性能比較代碼
- javascript使用appendChild追加節(jié)點實例
- js利用appendChild對<li>標簽進行排序的實現(xiàn)方法
- JS中appendChild追加子節(jié)點無效的解決方法
相關(guān)文章
本篇文章主要介紹了p5.js入門教程之小球動畫示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)可鍵盤控制的簡單抽獎程序，代碼簡潔，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了js中的如何定位固定層的位置,需要的朋友可以參考下2014-06-06
本文主要介紹了微信小程序視圖層莫名出現(xiàn)豎線的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
JavaScript中的canvas?實現(xiàn)一個圓環(huán)漸變倒計時效果
這篇文章主要介紹了JavaScript中的canvas?實現(xiàn)一個圓環(huán)漸變倒計時效果，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
MUI 實現(xiàn)側(cè)滑菜單及其主體部分上下滑動的方法
下面小編就為大家分享一篇MUI 實現(xiàn)側(cè)滑菜單及其主體部分上下滑動的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
受到同事啟發(fā),突然發(fā)現(xiàn)了幾個有趣又實用的web api,下面這篇文章主要給大家介紹了關(guān)于前端JavaScript獲取電池信息的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
下面小編就為大家?guī)硪黄W(wǎng)頁中的圖片查看器viewjs使用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07