Summary of Insertion Methods of DOM Node in jQuery Learning

This paper mainly summarizes the insertion methods of DOM nodes in jQuery, as well as the points for attention of various methods. Let's not say much below, let's take a look at the detailed introduction.

1. Insert append () and appendTo () internally

append: This operation is similar to executing native appendChild methods on the specified elements and adding them to the document. appendTo: In fact, using this method reverses the conventional $(A).append(B) Instead of appending B to A, append A to B.

append() And appendTo() The two methods have the same function, but the main difference is syntax-the location of content and goal is different. append() It is preceded by the object to be selected, followed by the element contents to be inserted into the object. appendTo() The content of the element to be inserted is preceded by the object to be selected.

  　　 $("#bt1").on('click', function() {
 //.append(),  Select the expression before the function, 
 // Parameter is what will be inserted. 
 $(".content").append('<div class="append"> Pass append Elements added by the method </div>')
 })

 $("#bt2").on('click', function() {
 //.appendTo() On the contrary, the content comes before the method, 
 // Whether it's 1 Selector expression   Or create as a tag on a tag 
 // It will be inserted at the end of the target container. 
 $('<div class="appendTo"> Pass appendTo Elements added by the method </div>').appendTo($(".content"))
 })

2. Insert prepend () and prependTo () internally

In addition to inserting the specified content at the end of the selected element (still inside) through append and appendTo, the corresponding method can also be inserted before the selected element. The methods provided by jQuery are prepend and prependTo

.prepend() Method inserts the specified element into the matching element as its first child element (if you want to insert it as the last child element, use the .append()) . .prepend() And. prependTo() To achieve the same function, the main differences are syntax, insertion content and target location For .prepend() For example, the selector expression is written in front of the method as a container for the content to be inserted, and the content to be inserted as an argument to the method And append()0 On the contrary, the content to be inserted is written before the method, which can be a selector expression or a dynamically created tag, with the container of the content to be inserted as an argument.

$("#bt1").on('click', function() {
 // Find class="aaron1" Adj. div Node , And then through prepend Add at the beginning of the interior 1 A new one p Node 
 $('.aaron1').prepend('<p>prepend Increased p Element </p>')
 })
 $("#bt2").on('click', function() {
 // Find class="aaron2" Adj. div Node , And then through prependTo Add the first position inside 1 A new one p Node 
 $('<p>prependTo Increased p Element </p>').prependTo($('.aaron2'))
 })

Here is a summary of the differences between the four methods of internal operation:

append() Append content inside each matched element prepend() Prefix content inside each matched element appendTo() Appends all matching elements to the collection of another specified element prependTo() Prefix all matching elements to another specified element set

3. Externally insert after () and before ()

There are various relationships between nodes and nodes before, which can be brothers besides father-son and grandparents. Before, when dealing with node insertion, we came into contact with several methods of internal insertion. In this section, we began to talk about the processing of external insertion, that is, the relationship between brothers. Here jQuery introduces two methods, which can be used to insert content before and after elements matching I.

Both before and after are used to add adjacent sibling nodes to the exterior of the relatively selected element Both methods can receive an HTML string, an DOM element, an array of elements, or an jQuery object to insert before or after each matching element in the collection Both methods support multiple parameter passing after (div1, div2,...). See the case code on the right

Note:

after adds html code to the back of the element. If there is an element behind the element, move the following element backward, and then insert html code. before adds html code to the front of the element. If there is an element before the element, move the previous element forward, and then insert html code.

$("#bt1").on('click', function() {
 // In the match test1 Insert before each element in the element collection p Element 
 $(".test1").before('<p style="color:red">before, Add before matching elements </p>', '<p style="color:red"> Multi-parameter </p>')
 })
$("#bt2").on('click', function() {
 // In the match test1 Insert after each element in the element collection p Element 
 $(".test2").after('<p style="color:blue">after, Add after matching elements </p>', '<p style="color:blue"> Multi-parameter </p>')
})

4. Externally insert insertAfter () and insertBefore ()

jQuery adds two new methods, insertAfter and insertBefore, because of the different position of content target

.before() And .insertBefore() Implement the same function. The main difference is grammar-the location of content and goal. For before() Select the expression in front of the function, the content as the parameter, and .insertBefore() On the contrary, the content comes before the method, and it will be placed before the element in the parameter .after() And appendTo()0 Implement the same function. The main difference is the syntax-especially the location of (insert) content and target. For after (), select the expression before the function, and the argument is what will be inserted. For appendTo()1 On the contrary, the content is before the method, and it will be placed after the element in the parameter before, after and insertBefore. insertAfter does not support multi-parameter processing except for the difference of target and position

Precautions:

insertAfter inserts the element encapsulated by JQuery into the back of the specified element. If there is an element behind the element, move the following element backward, and then insert the JQuery object; insertBefore inserts the element encapsulated by JQuery into the front of the specified element. If there is an element in front of the element, move the previous element forward, and then insert the JQuery object;

$("#bt1").on('click', function() {
 // In test1 Inserts each matching element in the collection before and after the element , Multiple parameters are not supported 
 $('<p style="color:red"> Test insertBefore Method increase </p>', '<p style="color:red"> Multi-parameter </p>').insertBefore($(".test1"))
})

$("#bt2").on('click', function() {
 // In test2 Inserts each matching element in the collection before and after the element , Multiple parameters are not supported 
 $('<p style="color:red"> Test insertAfter Method increase </p>', '<p style="color:red"> Multi-parameter </p>').insertAfter($(".test2"))
})

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.