Instructions for using appendChild, insertBefore and insertAfter in JavaScript

Instructions for using appendChild, insertBefore and insertAfter in JavaScript_javascript skills

WBOY

Release： 2016-05-16 18:12:59

Original

1298 people have browsed it

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 the child node array of the specified node. It seems a bit confusing to read. Simply put, it is to add the element to the specified node.
appendChild usage
target.appendChild(newChild)
newChild is inserted as the child node of target after the last child node
appendChild example

Copy code The code is as follows:

 
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 an existing child node. >insertBefore usage

target.insertBefore(newChild, existingChild) newChild is inserted as a child node of target before the existingChild node
existingChild is an optional parameter. When it is null, its effect is the same as appendChild

insertBefore example

Copy code The code is as follows: var oTest = document.getElementById("test");

var newNode = document.createElement("p");

newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode ,oTest.childNodes[0]); 

 
Okay, so if there is insertBefore, there should also be insertAfter, right? 
Okay, let’s write an example using Aptana, but Aptana’s smart prompt told me that there is no insertAfter method 

Then define one yourself :)
insertAfter definition

Copy code The code is as follows: function insertAfter(newEl, targetEl)

{

var parentEl = targetEl.parentNode ; 
if(parentEl.lastChild == targetEl) 
{ 
parentEl.appendChild(newEl); 
}else 
{ 
parentEl.insertBefore(newEl,targetEl.nextSibling); 
} 
} 

 

insertAfter usage and examples

Copy code The code is as follows: var txtName = document.getElementById("txtName");

var htmlSpan = document.createElement("span");

htmlSpan.innerHTML = " This is a test"; 
insertAfter(htmlSpan,txtName); 

 
Insert htmlSpan as a sibling node of txtName after the txtName node 

Summary:
1. appendChild and insertBefore are used as methods for pairing nodes, while insertAfter is just a custom function
2. Compared with appendChild, insertBefore is more flexible and can insert new nodes into any node array of the target node. One position.
3. Use appendChild and insertBefore to insert a new node. The premise is that its sibling nodes must have a common parent node