[Notes on usage of appendchild and insertbefore in turn]js

As AppendChild learned, the AppendChild () method adds a new child node to the end of the node's child nodes list.
If you don't understand it deeply, you will often make some mistakes. I used to be haha.
Let's take a look at the analysis.
var mydiv = document.createelement_x ("div");
var text = document.createTextNode ("Sichaoyun");
Mydiv.appendchild (text);
alert (Mydiv.childnodes[0].nodevalue);
Text is added to the div node.
When we use it, we must note that the text must be a node. You cannot directly add content or content inside an array.
var arr = ["Si", "Chaoyun"];
For example: Mydiv.appendchild (Arr[0]); Will go wrong.
The node must be added to the array in order to use AppendChild.
var arr=[];
Arr[0]=document.createtextnode ("Si");
Arr[1]=document.createtextnode ("Chaoyun");
Mydiv.appendchild (Arr[0]); that's OK. This adds a node.

AppendChild Another thing to note is that it will delete the source node。
Take a look at the demo below.
<divid= "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 inside the <span>1</span> added to mydiv inside the str1 inside the span no longer exists.
You can understand that it is moving into the mydiv. So the second one will pop up 1.
In addition, InsertBefore also deletes the source node.
Consider the following example:
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);

See how many alert will show? According to Common sense, dest originally had a node, plus src Two, should be three, but the result is 2. The reason is that after using InsertBefore, the corresponding child node of SRC has been deleted, or has been moved to dest, to be resolved, there are two methods.

Use the While loop to solve this problem <scripttype= "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> Source: http://blog.sina.com.cn/s/blog_43c4e0ca0100xssb.html

[Notes on usage of appendchild and insertbefore in turn]js