1DOM Internal Insert Append () and Appendto ()
The dynamically created element is not enough, it is only temporarily stored in memory, and eventually we need to put it on the page document and render it. So here's the question, how do I put it on the document?
This involves a positional relationship, and it is common to put the newly created element as a child of one element of the page into its interior. For such processing, jquery defines 2 methods of operation
Append: This operation is similar to the case when you perform native appendchild methods on the specified elements, adding them to the document.
AppendTo: In fact, using this method is reversed by the normal $ (A). Append (b) operation, that is, instead of appending B to a, instead of appending A to B.
A simple summary is:
. append () and. AppendTo () Two methods function the same, the main difference is the syntax--the content and the location of the target is different
Append () is preceded by the inserted object, followed by the element content to be inserted inside the object Appendto () preceded by the element content to be inserted, followed by the inserted object
2DOM external Insert after () with before ()
There are various relationships between nodes and nodes, except father and son, ancestral relationships, and brotherhood. Before we were dealing with the insertion of a node, we were exposed to several methods of internal insertion, and this section began with the processing of external insertions , the relationship between siblings , where jquery introduced 2 methods that can be used to insert content before and after the element that matches I
Description of the selector:
- Before and after are used to add adjacent sibling nodes to the outside of the selected element
- All 2 methods can receive an HTML string, a DOM element, an array of elements, or a jquery object, used to insert in front of or behind each matching element in the collection
- 2 methods support multiple Parameters pass after (Div1,div2,....) can refer to the right case code
Note the point:
- After the element is added after the HTML code, if there is an element behind the element, then move the following element back, and then insert the HTML code
- Before add HTML code to the front of the element, and if the element is preceded by an element, move the preceding element forward, then insert the HTML code
3DOM Internal Insert prepend () and Prependto ()
The method of manipulating inside an element, in addition to inserting the specified content through append and appendto at the end of the selected element (still inside ), can also be inserted before the selected element , jquery provides a method of prepend and Prependto
Description of the selector:
You can see the use and difference of prepend and prependto through the right code:
- The. Prepend () method inserts the specified element into the matching element as its first child element (if you want to insert as the last child element with. Append ()).
- . prepend () and. Prependto () to achieve the same functionality, the main difference is the syntax, the inserted content and the location of the target is different
- For. Prepend (), 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 the parameter of the method
- and. Prependto () on the contrary, the content to be inserted is written in front of the method, either as a selector expression or as a dynamically created tag, as a parameter for the container to insert the content.
Here is a summary of the differences in the internal operation of the four methods:
- Append () appends content to each matching element
- Prepend () internal front content to each matched element
- AppendTo () Appends all matching elements to the collection of another specified element
- Prependto () puts all matching elements in front of another specified set of elements
4DOM external Insert InsertAfter () and InsertBefore ()
As with internal insert processing, jquery adds 2 new methods to the location of the content targets InsertAfter and InsertBefore
- . before () and. InsertBefore () Implement the same functionality. The main difference is the syntax--the location of the content and the target. For the Before () selection expression in front of the function, the contents as arguments, and. InsertBefore () Just the opposite, the content is in front of the method, it will be placed in front of the element in the argument
- . After () and. InsertAfter () Implement the same functionality. The main difference is the syntax-especially (inserting) the content and the location of the target. For After () Select an expression in front of the function, the argument is what will be inserted. For. InsertAfter (), just the opposite, the content is in front of the method, it will be placed behind the element in the parameter
- Before, after and InsertBefore. InsertAfter does not support multi-parameter processing in addition to the target and location
Precautions:
- InsertAfter Inserts the jquery encapsulated element behind the specified element, and if there is an element behind it, move the trailing element back and insert the jquery object;
- InsertBefore inserts the jquery encapsulated element in front of the specified element, and if the element is preceded by an element, move the preceding element forward, then insert the jquery object;
Insertion of DOM nodes (JQuery)
