First simply under each method statements and corresponding usage
obj.appendChild (node) to add a new child node to a specified node (insert a new child node (element)), may not be very clear to say, the code may be clearer Ha! node represented by the node is to be added.
1 // Get element 2 var div = document.getElementById ( "DIV1" ); . 3 // create elements, these elements are added to the text . 4 var P = document.createElement ( "P" ); . 5 p.innerHTML = "Add 1 " ; . 6 var P1 = document.createElement (" P " ); . 7 p1.innerHTML =" Add 2 " ; . 8 var P2 = document.createElement (" P " ); . 9 p2.innerHTML =" Add 3 " ; 10 / / added to the div . 11 div.appendChild (P); 12 is div.appendChild (P1); 13 is div.appendChild(p2);
However, this method can only add an element to the end of the parent node. If we want to add that in the middle of the parent element of how to do it. w3c also provides a method, is obj.insertBefore (node, existingnode).
obj.insertBefore (node, existingnode) represents a new child node is inserted before the existing child node. node represents the node to be added, existingnode represent inserts new node in its prior. If not specified, the method will be inserted at the end of insertBefore.
1 // Get element 2 var div = document.getElementById ( "DIV1" ); . 3 // create elements, these elements are added to the text . 4 var P = document.createElement ( "P" ); . 5 p.innerHTML = "Add 1 " ; . 6 var P1 = document.createElement (" P " ); . 7 p1.innerHTML =" Add 2 " ; . 8 var P2 = document.createElement (" P " ); . 9 p2.innerHTML =" Add 3 " ; 10 / / added to the div . 11 div.appendChild (P); 12 is div.insertBefore (P1, P); 13 div.insertBefore(p2,p1);
insetBefore () can also be said to be inserted into the node Ha!
obj.replaceChild (newnode, oldnode) replace a child node with a new node. oldnode node must be obj element child, his return value is a pointer to that child has been replaced by the reference pointer node.
. 1 var div = document.getElementById ( "DIV1" ); 2 // create elements, some elements are added to the text . 3 var P = document.createElement ( "P" ); . 4 p.innerHTML = "Add. 1" ; . 5 var P1 document.createElement = ( "P" ); . 6 p1.innerHTML = "Add 2" ; . 7 var P2 = document.createElement ( "P" ); . 8 p2.innerHTML = "Add 3" ; 9 // added to the div 10 div.appendChild (P); . 11 div.insertBefore (P1, P); 12 is div.insertBefore (P2, P1); 13 // by creating a new element 14 var span = document.createElement ( "span" ); 15 span.innerHTML = "span" ; 16 // replace the first P . 17 div.replaceChild (span, P);
If the element itself as well as the child node is inserted, then those child nodes are also inserted into the target node before.
The replaceChild () method can also be used in an existing node in the document tree to replace an existing node to another. Code more clearly show!
1 // Get element 2 var div = document.getElementById ( "DIV1" ); . 3 // create elements, some elements are added to the text . 4 var P = document.createElement ( "P" ); . 5 p.innerHTML = "Add 1 " ; . 6 var P1 = document.createElement (" P " ); . 7 p1.innerHTML =" Add 2 " ; . 8 var P2 = document.createElement (" P " ); . 9 p2.innerHTML =" Add 3 " ; 10 / / added to the div . 11 div.appendChild (P); 12 is div.insertBefore (P1, P); 13 div.insertBefore (p2, P1); 14 // will replace p2 P 15 div.replaceChild (P, p2);
Use replaceChild () method of the tips:
- When oldnode is replaced, all the attributes associated with the content will be removed.
- newnode must first be established.
removeChild (node) Removes the child node (element), this directly on the code!
1 // Get element 2 var div = document.getElementById ( "DIV1" ); . 3 // create elements, some elements are added to the text . 4 var P = document.createElement ( "P" ); . 5 p.innerHTML = "Add 1 " ; . 6 var P1 = document.createElement (" P " ); . 7 p1.innerHTML =" Add 2 " ; . 8 var P2 = document.createElement (" P " ); . 9 p2.innerHTML =" Add 3 " ; 10 / / added to the div . 11 div.appendChild (P); 12 is div.insertBefore (P1, P); 13 div.insertBefore (P2, p1); 14 // delete p1 15 div.removeChild (p1);
Knowledge is probably the case. Nothing difficult. But when I was doing the case, also encountered some problems. Is the question of the parent element, add information when making the case before, if written directly in the table tr found, then use table as the parent element, which added to the line, the following error will be reported.
This is because the table to write directly inside tr, although not being given, but the browser will give you generate a tbody, this will not lead to table tr children, so there will be mistakes, so pay attention to whether a write to the parent element, in fact, the child can also be selected by the parent, thus ensuring that such errors do not occur.