The usage of AppendChild and insertBefore in js is explained in detail

The appendChild definition
The appendChild (newChild: Node) : the 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 an array of children of the specified node is a mouthful to say, simply adding an element to the specified node

The appendChild usage
Target. The appendChild (newChild)

The newChild is inserted after the last child node as a child of target

The appendChild example
Var newElement = document. The document. The createElement method (" label ");
NewElement. Element. The setAttribute (' value ', 'the Username:');

Var usernameText = document. The document. The getElementById (" username ");
UsernameText. The appendChild (newElement);

InsertBefore definition
The insertBefore() method inserts a new child node before an existing child node.

The insertBefore() method inserts a new child node in front of an existing child node

InsertBefore usage
Target. The insertBefore (newChild, existingChild)

The newChild is inserted before the existingChild node as a child of target

ExistingChild is an optional parameter, which is the same as appendChild when null

InsertBefore example
Var oTest = document. GetElementById (" test ");
Var newNode = document. The createElement method (" p ");
Newnode. innerHTML = "This is a test";

OTest. InsertBefore (newNode, oTest.childnodes [0]).  

 
Ok, so I guess there's an insertBefore and an insertAfter, right?
Ok, so let's write an example using Aptana, but Aptana's smart tip tells me that there's no insertAfter method
So define one for yourself :)

InsertAfter definition
The function insertAfter (newEl, targetEl)
{
          Var parentEl = targetEl. ParentNode;

          If (parentEl lastChild = = targetEl)
          {
                    ParentEl. The appendChild (newEl);
          } the else
          {
                    ParentEl. InsertBefore (newEl, targetEl nextSibling);
          }                      
}

 
InsertAfter usage with examples
Var txtName = document. GetElementById (" txtName ");
Var htmlSpan = document. The createElement method (" span ");
HtmlSpan. InnerHTML = "This is a test";
InsertAfter (htmlSpan txtName);

Insert htmlSpan as a sibling of txtName after the txtName node

Conclusion:
AppendChild and insertBefore are used as methods on nodes, and insertAfter is just a custom function

InsertBefore is more flexible than appendChild by inserting a new node into any position in the node array of the target node.

AppendChild and insertBefore are used to insert new nodes on the premise that their siblings must have a common parent