The HTML, append, AppendTo, after, InsertAfter series methods in jquery

1. HTML method, add HTML code to the element or empty the HTML code (the argument is an empty string);
   
2. Append add HTML code to the end of the element;
   
3. Appendto This method is similar to the Append method, except that the target of the HTML code to be added is different;
   
4. After the element is added after the HTML code, if there are elements behind the element, then the following elements will be moved back, and then insert the HTML code;
5. Before add HTML code to the front of the element, and if the element is preceded by an element, move the previous element forward, then insert the HTML code;
   
6. 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;
   
7. 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;
   
8. Empty empties the HTML code inside the element, it simply empties the internal HTML code, but the markup remains in the DOM;
   
9. Remove removes the entire element from the DOM;

An important point to note: jquery automatically perfects the HTML code, that is, if you want to do the following

[JavaScript]View Plain Copy

1. $ (' content '). Append ('<p>csdn ');

[JavaScript]View Plain Copy

1. $ (' content '). Append ('<p>csdn ');

The HTML code that is actually inserted into the markup is

[HTML]View Plain Copy

1. < P > CSDN</p>

[HTML]View Plain Copy

1. < P > CSDN</p>

This requires special attention, and many tutorials are just about the actions of these functions, but ignoring some of the details;

Let me explain in detail what each function does and how it works, and what the effect will be. I will work with a template like this, and the code and the effect are as follows:

[CSS]View Plain Copy

2. <style type="Text/css">
4. . box
6. {
8. width:100px;
10. height:100px;
12. border:2px solid Red;
14. padding:10px;
16. text-align:Center;
18. }
20. . Child
22. {
24. width:70px;
26. height:20px;
28. border:2px solid Red;
30. text-align:Center;
32. }
34. </style>

[CSS]View Plain Copy

2. <style type="Text/css">
4. . box
6. {
8. width:100px;
10. height:100px;
12. border:2px solid Red;
14. padding:10px;
16. text-align:Center;
18. }
20. . Child
22. {
24. width:70px;
26. height:20px;
28. border:2px solid Red;
30. text-align:Center;
32. }
34. </style>

[HTML]View Plain Copy

2. < Div id="Top" class="box">
4. < span >top</span>
6. </ Div >
8. < Div id="Middle" class="box">
10. < span >Middle</span>
12. </ Div >
14. < Div id="Bottom" class="box">
16. < span >bottom</span>
18. </ Div >

[HTML]View Plain Copy

2. < Div id="Top" class="box">
4. < span >top</span>
6. </ Div >
8. < Div id="Middle" class="box">
10. < span >Middle</span>
12. </ Div >
14. < Div id="Bottom" class="box">
16. < span >bottom</span>
18. </ Div >

Original:

First, the use of HTML functions

We execute the following statement:

[JavaScript]View Plain Copy

1. $ (' #middle '). html (' <div class= "Child" >html () ');

[JavaScript]View Plain Copy

1. $ (' #middle '). html (' <div class= "Child" >html () ');

As follows:

Then take a look at the final code:

Here's the full HTML code, which means that jquery complements the code for us, and it's important to note that jquery is convenient for us, but we need to be careful when we need to control the HTML code precisely.

The function of an HTML function is first to remove the HTML code inside the target element and then add the new code to the target element.

Second, the use of append and Appendto functions

Execute the following statement:

[JavaScript]View Plain Copy

1. $ (' #middle '). Append (' <div class= "Child" >append () </div> ');

[JavaScript]View Plain Copy

1. $ (' #middle '). Append (' <div class= "Child" >append () </div> ');

　　Note: For the sake of programming specification, HTML code I use the full HTML tag afterwards.

As follows:

The final code:

The Append function appends HTML to <span>middle</span>.

The Appendto function has the same effect as append, except that it is written differently:

[JavaScript]View Plain Copy

1. $ (' <div class= ' child ' >append () </div> '). AppendTo (' #middle ');

[JavaScript]View Plain Copy

1. $ (' <div class= ' child ' >append () </div> '). AppendTo (' #middle ');

Appendto first encapsulates the HTML code into a jquery object and then adds it to the specified target location.

Iii. use of After and InsertAfter functions

Execute the following statement:

[JavaScript]View Plain Copy

1. $ (' #middle '). After (' <div class= "Child" >after () </div> ');

[JavaScript]View Plain Copy

1. $ (' #middle '). After (' <div class= "Child" >after () </div> ');

：

The function of the after function is to insert the HTML code after the specified element, and if there is an element later, it will be moved and then inserted into the HTML code.

The InsertAfter function is the same as the after function, and the InsertAfter version of the above code is:

[JavaScript]View Plain Copy

1. $ (' <div class= ' child ' >after () </div> '). After (' #middle ');

[JavaScript]View Plain Copy

1. $ (' <div class= ' child ' >after () </div> '). After (' #middle ');

Iv. use of before and InsertBefore functions

This even the principle of a function and after, InsertAfter is the same, but before, InsertBefore is inserted in front of the target element, you can refer to After, InsertAfter.

V. Use of empty and remove functions

Execute the following code:

[JavaScript]View Plain Copy

1. $ (' #middle '). empty ();

[JavaScript]View Plain Copy

1. $ (' #middle '). empty ();

：

Take a look at the final HTML code:

[HTML]View Plain Copy

1. < Div id="Middle" class="box"></ Div >

[HTML]View Plain Copy

1. < Div id="Middle" class="box"></Div >

The HTML code inside is emptied, but the element itself is still there.

Execute the following statement:

[JavaScript]View Plain Copy

1. $ (' #middle '). Remove ();

[JavaScript]View Plain Copy

1. $ (' #middle '). Remove ();

：

The final HTML code:

[HTML]View Plain Copy

1. < Div id="Top" class="box">
2. < span >top</span>
3. </ Div >
4. < Div id="Bottom" class="box">
5. < span >bottom</span>
6. </ Div >

[HTML]View Plain Copy

1. < Div id="Top" class="box">
2. < span >top</span>
3. </ Div >
4. < Div id="Bottom" class="box">
5. < span >bottom</span>
6. </ Div >

The HTML, append, AppendTo, after, InsertAfter series methods in jquery