js原生appendChild的bug解決心得分享
更新時間：2013年07月01日 17:00:53 作者：
appendChild主要是用來追加節(jié)點插入到最后；循環(huán)的時候由于不停的搬家導致length 在改變，改用for的話開始的length已經被固定，問題就解決啦
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的內容插入到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內容插入到ul2里面，這個其實是搬家而不是復制 這個要切記
可以查看一下效果
為什么會出現(xiàn)這樣的效果 是因為 循環(huán)的時候 由于不停的搬家 導致length 在改變 如果用for的話 這樣開始的length 已經被固定啦 所以出現(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的內容插入到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內容插入到ul2里面，這個其實是搬家而不是復制 這個要切記
可以查看一下效果
為什么會出現(xiàn)這樣的效果 是因為 循環(huán)的時候 由于不停的搬家 導致length 在改變 如果用for的話 這樣開始的length 已經被固定啦 所以出現(xiàn)問題，所以說要改成
復制代碼 代碼如下:
while(oli.length){
ul2.appendChild(oli[0]);
}
這樣的都是插入第一條 所以就成功啦 大家可以試試
您可能感興趣的文章:
- 初學js插入節(jié)點appendChild insertBefore使用方法
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- JavaScript之appendChild、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é)點無效的解決方法
相關文章
js 右鍵菜單，支持不同對象不同菜單(兼容IE、Firefox)
版本雖然很老也不符合標準了，不過代碼是值得參考的，需要右鍵菜單的朋友可以參考下。2010-01-01
for循環(huán) + setTimeout 結合一些示例(前端面試題）
最近在學習node.js開發(fā)資料，正好碰到了for循環(huán)+settimeout的經典例子，下面小編給大家分享for循環(huán) + setTimeout 結合一些示例代碼，需要的朋友參考下吧2017-08-08
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動態(tài)和交互式網頁的技術,它的主要優(yōu)勢在于能夠在不刷新整個網頁的情況下與服務器進行數(shù)據(jù)交互,這篇文章主要給大家介紹了關于常見Ajax下載文件方式以及報錯解決辦法的相關資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了前端開發(fā)基礎javaScript的六大作用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要通過一個實例，簡單介紹了javascript arguments使用方法，小伙伴們參考下。2014-12-12
本文主要介紹了Javascript中的 “&” 和 “|” 的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
文本框只能輸入數(shù)字的js代碼(含小數(shù)點)
下面小編就為大家?guī)硪黄谋究蛑荒茌斎霐?shù)字的js代碼(含小數(shù)點)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JS模塊與命名空間的介紹，需要的朋友可以參考一下2013-03-03
用javascript實現(xiàn)li 列表數(shù)據(jù)隔行變換背景顏色
客戶端效果，效率自然不錯。以前的做法是偶數(shù)行時給li加一個class,方法當然不可取，如果后臺讀取再加class就很麻煩了，看看這個效果2007-08-08
下面小編就為大家?guī)硪黄狫avaScript使用atan2來繪制箭頭和曲線的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09