<script type="text/javascript">
<!--
//ITPOW www.itpow.com
var src = document.createElement("div");
src.innerHTML = "<span>1</span><span>2</span>"; //为了方便，这里直接使用 innerHTML 创建子元素。
var dest = document.createElement("div");
dest.innerHTML = "<span>3</span>"; //为了方便，这里直接使用 innerHTML 创建子元素。
for (var i = 0; i< src.childNodes.length; i++)
{
dest.insertBefore(src.childNodes[i], dest.childNodes[0]);
}
alert(dest.childNodes.length);
//-->
</script>
看看 alert 会显示几？按常理，dest 本来有一个节点，再加上 src 的两个，应该是三个才对，可是结果却是 2。
原因是使用 insertBefore 后，src 对应的子节点已经被删除，或者说已经被移动到 dest，要解决，有两种方法。
法一、使用 cloneNode。
<script type="text/javascript">
<!--
//ITPOW www.itpow.com
var src = document.createElement("div");
src.innerHTML = "<span>1</span><span>2</span>"; //为了方便，这里直接使用 innerHTML 创建子元素。
var dest = document.createElement("div");
dest.innerHTML = "<span>3</span>"; //为了方便，这里直接使用 innerHTML 创建子元素。
for (var i = 0; i< src.childNodes.length; i++)
{
dest.insertBefore(src.childNodes[i].cloneNode(true), dest.childNodes[0]);
}
alert(dest.childNodes.length);
//-->
</script>
关于 cloneNode，请参见 cloneNode(deep) deep 的 true、false 意义。
法二、使用 while 循环。
<script type="text/javascript">
<!--
//ITPOW www.itpow.com
var src = document.createElement("div");
src.innerHTML = "<span>1</span><span>2</span>"; //为了方便，这里直接使用 innerHTML 创建子元素。
var dest = document.createElement("div");
dest.innerHTML = "<span>3</span>"; //为了方便，这里直接使用 innerHTML 创建子元素。
while (src.childNodes.length > 0)
{
dest.insertBefore(src.childNodes[0], dest.childNodes[0]);
}
alert(dest.childNodes.length);
//-->
</script>
appendChild 同 insertBefore 一样，不再赘述。
