Introduction and Application of jquery element control (append element/Append content)

Introduction and Application of jquery element control (append element/Append content)
1. append the element append inside or outside the element. prepend: add it to the child element.
Before, after: Add as a sibling Element

Html:

Append a news post to me

Js:

<Script type = "text/javascript"> jQuery (function () {// Append content inside the element $ ("# content "). append ("Yao Ming retired... ") ;}) </script>

Add an element to # content.

Yao retired...

Add a child element to # content. If you want to append an element outside the element, you need to use "after ".

Yao retired...

Append as a sibling element to the end of # content.

<Script type = "text/javascript"> jQuery (function () {// Add span to the end of content1 $ ("# content "). after ("Yao retired... ") ;}) </script>

2. Append content to different elements

Html:

The moonlight in front of the window is suspected to be frost on the ground

Js:

<Script type = "text/javascript"> jQuery (function () {// Add span to the end of content1 $ ("span "). appendTo ("# content1") ;}) </script>

3. Add content at the beginning of an element

Html:

Append a news post to me

Js:

<Script type = "text/javascript"> jQuery (function () {// Append content at the beginning of an element $ ("# content "). prepend ("Header") ;}) </script>

4. Add content at the beginning of different elements

Html:

Append a piece of news to my end, which is suspected to be ground cream.

Js:

<Script type = "text/javascript"> jQuery (function () {// Append content at the beginning of different elements $ ("span "). prependTo ("# content") ;}) </script>

Add an element to # content as a sub-element to the beginning of # content. If you want to add a start element outside the element, use before, in this way, we can append the suspected ground cream to # content as a sibling element.

<Script type = "text/javascript"> jQuery (function () {// Append content at the beginning of different elements $ ("span "). before ("# content") ;}) </script>

5. contain elements with elements of the specified structure

Warp (html)
Specify the html element in the specified html, but the specified element cannot contain the sibling element. Otherwise, it cannot run normally and does not contain a common text string, the following code uses the div tag to include the p tag.

Html:

Js:

<script type="text/javascript"> jQuery(function(){ $("span").wrap(""); }) </script> 

6. contain multiple html elements with specified elements

WrapAll (html)

Html:

Js:

<script type="text/javascript"> jQuery(function(){ $("p").wrapAll("  "); }) </script> 

7. Use a specified tag to include child elements

WrapInner (html)
Like the warp method, html elements are specified in html, for example:
The code for using the B label to contain the text in the p label is as follows:

Html:

Include the text of the p tag with the B tag
 
The p label text is also included with the B label
 

Js:

javascript <script type="text/javascript"> jQuery(function(){ $("p").wrapInner(""); }) </script>