JavaScript DOM-5 Adding, deleting, and replacing nodes (creating nodes, inserting nodes, deleting and replacing nodes)

First, create a node

Creating elements

-You can create a new element node using the following method:

-Document.createelement (' element name ');

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/58/wKioL1b9CGix22vCAAB5bpmtetE126.png "title=" Web.png "alt=" Wkiol1b9cgix22vcaab5bpmtete126.png "/>

Create a text node

-You can create a new element node using the following method:

-document.createTextNode (' text ');

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/58/wKioL1b9CLjieZvGAAA8Hs6odiY475.png "title=" Web.png "alt=" Wkiol1b9cljiezvgaaa8hs6odiy475.png "/>

Create a comment

-You can create an HTML comment node using the following method:

-Document.createcomment (' comment ');

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/5C/wKiom1b9CE2SfyPTAAA8n53xukY097.png "title=" Web.png "alt=" Wkiom1b9ce2sfyptaaa8n53xuky097.png "/>

Create a document Fragment

-Use the following method to create a document fragment:

-Document.createdocumentfragment ();

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/58/wKioL1b9CTfxb4kuAABAx2oV228555.png "title=" Web.png "alt=" Wkiol1b9ctfxb4kuaabax2ov228555.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M01/ 7e/5c/wkiom1b9cldtub7-aabs1sxmsyo778.png "title=" Web.png "alt=" Wkiom1b9cldtub7-aabs1sxmsyo778.png "/>

Second, insert the node

AppendChild

-Parentnode.appendchild (Childnode) can be used to append the last child node to a parent element

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/58/wKioL1b9CaDwVcLCAABUOUXlT9g136.png "title=" Web.png "alt=" Wkiol1b9cadwvclcaabuouxlt9g136.png "/>

InsertBefore

-The Parentnode.insertbefore (Newchild,existingchild) method is used to add a new child node between the specified nodes in the parent element (which can also be used to move child nodes)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/5C/wKiom1b9CUvQxqwQAAAmhFi1480011.png "title=" Web.png "alt=" Wkiom1b9cuvqxqwqaaamhfi1480011.png "/>650" this.width=650; "src=" http://s4.51cto.com/wyfs02/M00/ 7e/58/wkiol1b9cf_whippaabude_rv1u525.png "title=" Web.png "alt=" Wkiol1b9cf_whippaabude_rv1u525.png "/>

Third, delete and replace nodes

Delete a node

-You can delete a child node using the following method:

-Parentnode.removechild (Childnode); All bound events should be unbound before the child nodes are deleted, otherwise the memory occupied by the event bindings cannot be reclaimed

-this method returns a reference to the node that was deleted

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/5C/wKiom1b9CfSStqQRAAAlwPlbMk4172.png "title=" Web.png "alt=" Wkiom1b9cfsstqqraaalwplbmk4172.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M00/ 7e/59/wkiol1b9cqvjadhcaaas5f-nz_c282.png "title=" Web.png "alt=" Wkiol1b9cqvjadhcaaas5f-nz_c282.png "/>

Replace node

-You can replace a child node that already exists by using the following method:

-Parentnode.replacechild (Newnode,oldnode)

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/5D/wKiom1b9CkbChV0PAAAmvV5Vmg4960.png "title=" Web.png "alt=" Wkiom1b9ckbchv0paaamvv5vmg4960.png "/>650" this.width=650; "src=" http://s4.51cto.com/wyfs02/M01/ 7e/59/wkiol1b9cwdhe8tgaabbv2fniea283.png "title=" Web.png "alt=" Wkiol1b9cwdhe8tgaabbv2fniea283.png "/>

Delete Property

-There are two ways to delete an element's properties:

-Element.removeattribute (' attrname ');

-Element.removeattributenode (' attrnode '); Returns the deleted attribute node

Summary: This chapter focuses on JavaScript DOM additions, deletions, and replacements nodes (create nodes, insert nodes, delete and replace nodes)

This article from the "Technical Exchange" blog, declined reprint!

JavaScript DOM-5 Adding, deleting, and replacing nodes (creating nodes, inserting nodes, deleting and replacing nodes)