[转]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++)
{
 

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

标签：

原文地址：http://www.cnblogs.com/newh5/p/4722575.html