1, create the node.
CreateElement ():
var a = document.createelement ("P");
It creates an element node, so NodeType equals 1.
A.nodename will return p;
Note that the new element node created by the createelement () method is not automatically added to the document, since it has not been added to the document, indicating that it is still a free state. So it has no nodeparent attribute.
If you want to add it to your document, you can use either the appendchild () or the InsertBefore () method or the ReplaceChild () method. Of course, in the previous example, we wrote a InsertAfter () method;
Like what:
var a = document.createelement ("P");
Document.body.appendChild (a);
Note: AppendChild () is added to the end of the document by default. Which is the LastChild child node.
If you want to add to a place, you can use InsertBefore ().
If you want to add attributes to an element before the element is inserted. Can do this:
var a = document.createelement ("P");
A.setattribute ("title", "My Demo");
Document.body.appendChild (a);
createTextNode ():
var B = document.createTextNode ("my Demo");
It creates a text node, so NodeType equals 3.
B.nodename will return to #text;
As with createelement (), nodes created with createTextNode () are not automatically added to the document. You need to use either the appendchild () or the InsertBefore () method or the ReplaceChild () method.
He used to work with createelement () to see why? (an element node, a text node.) ）
var mes = document.createTextNode ("Hello World");
var container = document.createelement ("P");
Container.appendchild (MES);
Document.body.appendChild (container);
2, copy the node.
CloneNode (Boolean):
It has a parameter.
var mes = document.createTextNode ("Hello World");
var container = document.createelement ("P");
Container.appendchild (MES);
Document.body.appendChild (container);
var Newpara = Container.clonenode (true); the difference between//true and false
Document.body.appendChild (Newpara);
Attention:
true: <p>aaaa</p> cloning.
False: Clone <p></p> only, the text inside is not cloned.
You can write an example of yourself, and then use Firebug to see.
The new cloned node, like createTextNode (), is not automatically inserted into the document. Need AppendChild ();
Another note: If the ID after cloning, do not forget to use setattribute ("id", "another_id");
Change the ID of the new node.
3, insert the node.
AppendChild ():
Appends a child node to the element, and the new node is inserted at the end.
var container = document.createelement ("P");
var t = document.createtextnode ("Cssrain");
Container.appendchild (t);
Document.body.appendChild (container);
He is often used in conjunction with createelement () and createTextNode (), CloneNode ().
In addition, appendchild () can be used not only to append new elements, but also to reposition existing elements in the document.
Look at the following example:
<p id= "MSG" >msg</p>
<p id= "Content" >content</p>
<p id= "AAA" >aaaaaaaa</p>
<script>
var mes = document.getElementById ("msg");
var container = document.getElementById ("content");
Container.appendchild (MES);
</script>
MSG was found behind the content.
JS Internal processing mode:
First remove the ID msg from the document and then insert it into the content as the last node of the content.
The results are:
<p id= "Content" >
Content
<p id= "MSG" >msg</p>
</p>
<p id= "AAA" >aaaaaaaa</p>
InsertBefore ():
As the name implies, is to insert a new node in front of the target node.
Element.insertbefore (NewNode, Targernode);
The second argument is optional, and if the second argument is not written, the default is added to the end of the document, equivalent to AppendChild ();
Let's see how the InsertBefore () is used:
<div id= "Cssrian" >
<p id= "Content" >1111</p>
<div id= "MSG" >msg<div>test</div></div>
<p id= "Content" >222</p>
<p id= "AAA" >aaaaaaaa</p>
</div>
<script>
var msg = document.getElementById ("msg");
var AAA = document.getElementById ("AAA");
var test = document.getElementById ("Cssrian");
Test.insertbefore (msg, AAA);
</script>
We found that the ID msg was inserted into the front of AAA.
JS Internal processing mode is similar to AppendChild ().
4, delete the node.
RemoveChild ():
<body>
<div id= "Cssrain" >
<div id= "a" >a </div>
<div id= "B" >b </div>
<div id= "C" >c </div>
</div>
</body>
<script>
var msg = document.getElementById ("Cssrain");
var B = document.getElementById ("B");
Msg.removechild (b);
</script>
If you do not know what the parent node of the node you want to delete is? You can use the ParentNode property.
Like what:
<body>
<div id= "Cssrain" >
<div id= "a" >a </div>
<div id= "B" >b </div>
<div id= "C" >c </div>
</div>
</body>
<script>
var B = document.getElementById ("B");
var c = B.parentnode;
C.removechild (b);
</script>
Note: If you want to move a node from one place to another, you do not have to use RemoveChild ().
You can use the front appendchild () and InsertBefore (), and they will automatically delete the node and then move to the location you specified. 、
5, replace the node.
Element.repalcechild (NewNode, OldNode);
The OldNode must be a child node of the element.
<body>
<div id= "Cssrain" >
<div id= "a" >a </div>
<div id= "B" >b </div>
<div id= "C" >c </div>
</div>
</body>
<script>
var cssrain = document.getElementById ("Cssrain");
var msg = document.getElementById ("B");
var para = document.createelement ("P");
Cssrain.replacechild (Para, msg);
</script>
Current 1/2 page
12 Next read the full text
