[转]js中的appendChild 和insertBefore的用法注意事项

appendChild 学过的都知道，appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
如果对它理解不深，经常会犯一些错误。我以前就是哈哈。
下面我们来分析一下。
var myDiv = document.createElement_x("div");
var text = document.createTextNode("sichaoyun");
myDiv.appendChild(text);
alert(myDiv.childNodes[0].nodeValue);
text 就会添加到div节点里面。
我们用的时候一定要注意，text一定要是节点。不能直接添加内容或数组里面的内容。
var arr = ["si","chaoyun"];
比如：myDiv.appendChild(arr[0]); 就会出错。
必须把节点添加到数组里面 才可以用appendChild.
var arr=[];
arr[0]=document.createTextNode("si");
arr[1]=document.createTextNode("chaoyun");
myDiv.appendChild(arr[0]);这样就ok啦。这样添加的是节点。

appendChild另一个需要注意的就是它会删除源节点。
来看下面这个demo。
<div id="mydiv"></div>

var str1=document.createElement_x('div');
str1.innerHTML="<span>1</span><span>2</span>";
alert(str1.childNodes.length); //2
document.getElementByIdx_x('mydiv').appendChild(str1.childNodes[0]);
alert(str1.childNodes.length); //1
str1里面的<span>1</span>添加到mydiv里面之后 str1里面的span已经不存在了。
你可以理解为是移动到mydiv里面。所以第二个会弹出1.
另外insertBefore也是会删除源节点。
来看下面这个例子：
var src = document.createElement_x("div");
src.innerHTML = "<span>1</span><span>2</span>";
var dest = document.createElement_x("div");
dest.innerHTML = "<span>3</span>";
for (var i = 0; i< src.childNodes.length; i++)
{
 

   dest.insertBefore(src.childNodes[i], dest.childNodes[0]);
}
alert(dest.childNodes.length);

看看 alert 会显示几？按常理，dest 本来有一个节点，再加上 src 的两个，应该是三个才对，可是结果却是 2。原因是使用 insertBefore 后，src 对应的子节点已经被删除，或者说已经被移动到 dest，要解决，有两种方法。

使用 while 循环可以解决这个问题

<script type="text/javascript">
var src = document.createElement_x("div");
src.innerHTML = "<span>1</span><span>2</span>";
var dest = document.createElement_x("div");
dest.innerHTML = "<span>3</span>";

while (src.childNodes.length > 0)
{
    dest.insertBefore(src.childNodes[0], dest.childNodes[0]);
}
alert(dest.childNodes.length);

</script>

 

源：http://blog.sina.com.cn/s/blog_43c4e0ca0100xssb.html