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+
Adding a node to the child node array of the specified node seems a bit confusing to read. Simply put, it means adding elements to the specified node.
appendChild usage
target.appendChild(newChild)
newChild is inserted as a child node of target after the last child node
appendChild example
var newElement = document.Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username');
usernameText.appendChild(newElement);
insertBeforedefinition
The insertBefore() method inserts a new child node before an existing child node.
The insertBefore() method is used to insert a new child node before the 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
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 tells me that there is no insertAfter method.
Then define a Luo by yourself :)
insertAfter definition
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
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
Summarize:
1. appendChild and insertBefore are used as methods for nodes, while insertAfter is just a custom function.
2. Compared with appendChild, insertBefore is more flexible and can insert a new node into any position in the target node's child node array.
3. Use appendChild and insertBefore to insert a new node. The premise is that its sibling nodes must have a common parent node.