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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.