Comparison and summary of native JS adding node method and jquery adding node method

First, build a simple layout, for the below to explain the use of

1, the HTML part of the code :

<DivID= "Div1">Div1</Div><DivID= "Div2">Div2<spanID= "Span1">Span1</span>    <spanID= "Span2">Span2</span></Div><DivID= "Div3">Div3<bID= "B1">B1</b>    <bID= "B2">B2</b></Div>

2. JS part of the code: (First to write in the HTML just a few tags are obtained, here only in the native JS, in jquery default is deleted)

var oDiv2 = document.getElementById (' div2 ');
var oSpan2 = document.getElementById (' span2 ');
var oB2 = document.getElementById (' B2 ');

3. Illustration:

Second, the original JS species add Node A total of 2 ways

1,appendchild ()

(1), Concept: Add the node to be added to the last side of the specified parent, so also called append

(2), How to use: Parent node. appendchild (the node to be added)

(3), JS code:

function () {    odiv2.appendchild (oB2); // Append B2 to the last side of Div2 }

(4), diagram:

(5), Compatibility: This method is supported by all browsers

2,insertbefore ()

(1), concept: Add the node to be inserted before the specified node inside the specified parent

(2), how to use: Parent node. insertbefore (node to insert, specify node)

(3), JS Code:(Note: Each time a new method is executed, the previous method will be commented out, in order to understand, the comment here once, the following article will no longer comment on the code of the previous method to send up)

function () {    //odiv2.appendchild (oB2); the previous method annotation    odiv2.insertbefore (ob2,ospan2) ;  Insert B2 into div2 in front of Span2 }

(4), diagram:

(5), Compatibility: All browsers support this method, but it is worth noting that if the second parameter node does not exist, under IE and Safari will be added to the node using the AppendChild () method to append to the specified parent, and other major browsers (Firefox, Chrome, opera, etc.) will be error, so when inserting a node, you need to first determine whether the second parameter node exists

Third, the addition of the node in jquery there are 4 groups of methods, each group of methods have 2 ways

First group:before (),insertbefore ()

Second group: After(),InsertAfter ()

Group III:prepend (),prependto ()

Group Fourth:append (),appendTo ()

1, the first group of before ()

(1), Concept: Add a node to add before the specified node

(2), How to use: Specify the node. Before (node to add)

(3), JS code:

A random import of jquery first (at this point by default, the way to get elements through the native JS code has been deleted, and the code to import jquery only once, the following article is no longer sent)

<script src= "Http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js" ></script>

$ (document). Click (function() {    $(' #span2 '). Before ($ (' #b2 '));    Add b2} in front of span2)

(4), diagram:

(5), Compatibility: This method is supported by all browsers

2, the first group of InsertBefore()

(1), Concept: Insert the node you want to insert into the front of the specified node

(2), how to use: the node to be inserted. InsertBefore (Specify node)

(3), JS code:

$ (document). Click (function() {    $(' #b2 '). InsertBefore ($ (' #span2 '));   Insert B2 in front of Span2 })

(4), diagram:

(5), Compatibility: This method is supported by all browsers

3, the second group after ()

(1), Concept: Add the node you want to add to the back of the specified node

(2), How to use: Specify the node. After (the node to be added)

(3), JS code:

$ (document). Click (function() {    $ (' #span2 '). After ($ (' #b2 '));    Add b2} at the back of Span2)

(4), diagram:

(5), Compatibility: This method is supported by all browsers

4, the second group of InsertAfter()

(1), Concept: Insert the node to be inserted behind the specified node

(2), how to use: the node to be inserted. InsertAfter (Specify node)

(3), JS code:

$ (document). Click (function() {    $ (' #b2 '). InsertAfter ($ (' #span2 '));  Insert B2 to the back of Span2 })   

(4), diagram:

(5), Compatibility: This method is supported by all browsers

5, the third group of prepend()

(1), Concept: Add the specified node to the front of the specified parent

(2), how to use: Parent node. prepend (the node to be added)

(3), JS code:

$ (document). Click (function() {    $(' #div2 '). Prepend ($ (' #b2 '));   Add B2} in front of Div2)

(4), diagram:

(5), Compatibility: This method is supported by all browsers

6, the third group of prependto()

(1), Concept: Add the specified node to the front of the specified parent

(2), how to use: the node to be added. Prependto (parent node)

(3), JS code:

$ (document). Click (function() {    $(' #b2 '). Prependto ($ (' #div2 '));   Add B2 to the front of Div2 })

(4), diagram:

(5), Compatibility: This method is supported by all browsers

7, the fourth group of Append (Note: This method is basically equivalent to the native JS AppendChild method)

(1), Concept: Add the specified node to the last face in the specified parent

(2), How to use: parent node. Append (the node to be added)

(3), JS code:

$ (document). Click (function() {    $(' #div2 '). Append ($ (' #b2 '));   Add B2} to the last side of the Div2)

(4), diagram:

(5), Compatibility: This method is supported by all browsers

8, fourth group of appendto ()

(1), Concept: Add The specified node to the last face in the specified parent

(2), how to use: the node to be added. AppendTo (parent node)

(3), JS code:

$ (document). Click (function() {    $(' #b2 '). AppendTo ($ (' #div2 '));   Add B2 to the last side of Div2 })

(4), diagram:

(5), Compatibility: This method is supported by all browsers

Iv. 4 groups of methods for adding nodes in jquery the difference between each group

1, found that the problem: sharp-eyed's friends are not difficult to find, jquery this 4 groups of methods to add nodes, each group of 2 methods to achieve almost the same effect, then they exactly what is different? I'll take an example, and everybody knows.

2, Example : We take the fourth group as an example, now I want to make some changes to the JS code, in the back with the CSS method to add the background color

3, to use The Append () method code plus CSS method

(1), JS Code:

$ (document). Click (function() {    $ (' #div2 '). Append ($ (' #b2 ')). CSS (' background ', ' red ');   Add B2 to the last side of the Div2 and give the returned jquery object a background color })

(2), diagram:

4, to use the AppendTo () method code plus CSS method

(1), JS code:

$ (document). Click (function() {    $ (' #b2 '). AppendTo ($ (' #div2 ')). CSS (' background ', ' red ');   Add the B2 to the last side of the Div2 and give the returned jquery object a background color })

(2), diagram:

V. Summary

Through the above 2 graphs, it can be found that through the append () and the AppendTo () method can be added to the operation of the node, but they return the jquery object is different, We sometimes want to follow up on the jquery object that is returned after adding the node, so we choose the method to add the node, according to our actual needs. (The same is true of the other 3 groups.)

Comparison and summary of native JS adding node method and jquery adding node method