A detailed analysis of the usage of appendchild and insertbefore in JS

Source: Internet
Author: User
Tags define function

  This article is mainly on the use of JS AppendChild and InsertBefore in a detailed analysis of the introduction, the need for friends can come to the reference, I hope to help you.

AppendChild definition appendchild (Newchild:node): node appends a node to the ChildNodes array for the node. Supported:ie 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ Add a node to an array of child nodes of the specified node, it seems a bit awkward to read, simply to add the element to the specified node   AppendChild usage target.appendchild (newchild)   newchild after inserting the last child node as the target's child node   AppendChild example Var newelement = document. Document.createelement (' label ');  newElement.Element.setAttribute (' value ', ' Username: ');   var usernametext = document. document.getElementById (' username ');  usernametext.appendchild (newelement);    InsertBefore Definition The InsertBefore () method inserts a new child node before a existing child node. The   InsertBefore () method is to insert a new child node   insertbefore usage target.insertbefore (newchild,existingchild) before an existing child node   Newchild is inserted into the Existingchild node as a child node of target   Existingchild is an optional parameter, and when null it has the same effect as appendchild   insertbefore example var otest = document.getElementById ("test"); var newNode = document.createelement ("p"); newnode.innerhtml = "This is a test";   Otest.insertbefore (newnode,otest.childnodes[0]);       Okay, so there's a insertbefore should have InsertAfter, right? Well, let's write an example with Aptana, but Aptana's smart tip tells me that there's no insertafter this way to define a Rom:   InsertAfter define function InsertAfter (newel , Targetel) {      var Parentel = targetel.parentnode         if (Parentel.lastchild = = Targetel)       {           parentel.appendchild (newel);     &NB Sp }else       {           parentel.insertbefore (newel,targetel.nextsibling);      }             {    InsertAfter usage and example var txtname = Document.g Etelementbyid ("txtname"); var Htmlspan = document.createelement ("span"); htmlspan.innerhtml = "This is a test"; InsertAfter (Htmlspan,txtname);   Insert Htmlspan as txtname sibling to the Txtname node   summary: 1, AppendChild and InsertBefore are methods for using the node, and InsertAfter is just a custom function   2, InsertBefore relative to AppendChild, it is more flexible to insert a new node into any location in the target node array.   3, using appendchild and InsertBefore to insert a new node, the premise is that its sibling nodes must have a common parent node    
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.