JQuery Document Processing

Append AppendTo
<script type= "Text/javascript" >$ (document). Ready (function() {  $ ("button"). Click (function() {    $ ("P"). Append ("<b>hello world!</b>");})  ; </script>
<script type= "Text/javascript" >$ (document). Ready (function() {  $ ("button"). Click (function() {    $ ("P"). Append (function(n) {      return " <b>this P element has index "+ n +" </b> ";    }   );}); </script>
The AppendTo () method inserts the specified content at the end of the selected element (still inside).
Tip: The Append () and AppendTo () methods perform the same tasks. The difference is that the location of content and selectors, and append () can use functions to attach content.
$ ("<b> Hello world!</b>"). AppendTo ("P");
1. Append (content) method
Method function: appends content to each matching element. 
Parameter description: Content (<Content>): What to append to the target.
Usage examples:
HTML code for <p>i come from </p><p>i love </p>
Append a word to all P tags in China, the notation is $ ("P"). Append ("China");
Result: <p>i come from China</p><p>i love </p>
2. AppendTo (expr) method
Method: appends all matching elements to the specified set of element elements. 
Parameter description: Expr (String): A jquery expression used to match elements.
Usage examples:
HTML code for <b>i love </b><p></p>
Append the label B to the P element, and the notation is $ ("B"). AppendTo ("P");
The result: ><p><b>i love </b></p>
Using Appendto This method reverses the regular $ (A). Append (b) operation, that is, instead of appending B to a, append a to B.
The prepend () prependto () element is the inner front content.
$("p").after("<b>Hello</b>");    Inserts the content after each matching element.
$("p").before("<b>Hello</b>");  Insert the content before each matching element.

$("p").insertAfter("#foo");   Inserts all matching elements behind another, specified set of element elements.
$("p").insertBefore("#foo");  Inserts all matching elements in front of another, specified set of element elements.

$("p").wrap("<div class=‘wrap‘></div>");  Wrap up all the paragraphs with a newly created Div
$("p").wrap(document.getElementById(‘content‘));  Wrap each paragraph with a div with an ID of "content"

When reading a book tonight, I found that jquery has three ways of wrapping nodes, Baidu has a bit of jquery wrap ()/Wrapall ()/Wrapinner (), and sure enough, the search results W3school document description is the first.
However, W3school's explanation is this:
JQuery Document Operations-wrap () method
The Wrap () method places each selected element in the specified HTML content or element.
JQuery Document Operations-Wrapall () method
Wrapall () places all selected elements in the specified HTML content or element.
JQuery Document Operations-Wrapinner () method
The Wrapinner () method wraps all the contents of each selected element (inner HTML) using the specified HTML content or element.
I read fewer books, and it is really annoying to see such explanations not immediately solve my confusion.
or hands-on most practical.
This is used to compare the original code:
<p> I was the seat. </p>
<p> I was the seat. </p>
Wrap () method
$ ("P"). Wrap ("<strong></strong>");
Results:
You can see that the strong tag surrounds each of the matching P tags.
Wrapall () method
$ ("P"). Wrapall ("<strong></strong>");
Results:
It can be seen that the strong tags all match the P tag all of a sudden surrounded.
Wrapinner () method
$ ("P"). Wrapinner ("<strong></strong>");
Results:
You can see that the strong tag is embedded inside each matching p tag.
This method moves the parent element out of the element. This can quickly cancel the effect of the. Wrap () method. Matching elements (and their sibling elements) replace their parent elements on the DOM structure.
 $("p").unwrap()   移除父级元素，使p元素不再被包围




In jquery, we can replace the nodes in the element with the ReplaceWith () and ReplaceAll () methods.
Syntax format: replacewith (content) replaces all selected elements with the specified HTML and DOM elements. Where the parameter is selected to replace the content.
ReplaceAll (selector) replaces the specified selector element.
Example: There are two span tags in the following page. Replace the contents of an element with the above two functions
1 <script type= "Text/javascript" >
2 $ (function () {
3 $ ("#Span1"). ReplaceWith ("<span title= ' replacewith ' >Rainier</span>");
4 $ ("<span title= ' replaceall ' >[email protected]</span>"). ReplaceAll ("#Span2");
5})
6 </script>
7 8 <body>
9 <p> Name: <span id= "Span1" ></span></p>
<p> Email: <span id= "Span2" ></span></p>
</body>
Note that both the replacewith () and the ReplaceAll () methods can implement the substitution of element nodes, the biggest difference between
Replaces the selected element with a character in parentheses, in the order of the replacement character, which is replaced by a string in parentheses
The selected element. Also, once the replacement is complete, all occurrences of the replaced element will disappear.
$ (". Btn1"). Click (function () {
$ ("P"). ReplaceWith (function () {
Return "<b>hello world!</b>";
});
});
$("p").empty();  Deletes all the child nodes in the matching element collection.
$("p").remove();
Removes all matching elements from the DOM.
This method does not remove the matching elements from the jquery object, so that the matching elements can be used in the future. But besides the element itself is preserved, other such as bound events, additional data, etc. will be removed.
$("p").detach();
Removes all matching elements from the DOM.
This method does not remove the matching elements from the jquery object, so that the matching elements can be used in the future. Unlike remove (), all bound events, attached data, and so on are preserved.
Clone ()
 
 JQuery Document processing