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

Introduction and Application of jquery element control (append element/Append content), jquery Element
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:

<Div id = "content"> append a news post to mE </div>

Js:

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

Add an element to # content. This is to retire <p> Yao Ming... </p> as a child element, add it to # content. If you want to append an element outside the element, you need to use "after". In this way, you can retire <p> Yao Ming... </p> 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:

<Div id = "content1" style = "border: 1px solid red"> bright moonlight in front of the window </div> <span> suspected ground frost </span>

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:

<Div> <div id = "content"> append a news post to mE </div>

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:

<Div id = "content"> append a news post to mE </div> <span> suspected ground cream </span>

Js:

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

Add an element to # content, which adds <span> suspected ground cream </span> as a child element to the start position of # content. If you want to add a start element outside the element, before needs to be used. In this way, you can append <span> suspected to be a ground cream </span> As a sibling element to # content.

<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:

<Form id = "form1" runat = "server"> <span> include me in div </span> </form>

Js:

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

6. contain multiple html elements with specified elements

WrapAll (html)

Html:

<Form id = "form1" runat = "server"> p content </form>

Js:

<script type="text/javascript"> jQuery(function(){ $("p").wrapAll("<div style='border:1px solid red'>  </div>"); }) </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:

<P> include the text of the p tag with the B tag </p>

Js:

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