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

Source: Internet
Author: User
Tags html comment

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)

Related Article

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.