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

1. Add an element inside or outside the element
Append, prepend: add to child element
Before, after: Add as a sibling Element
Html: Copy codeThe Code is as follows: <div id = "content">
<P> append a news post to mE </p>
</Div>

Javascript:Copy codeThe Code is as follows: <script type = "text/javascript">
JQuery (function (){
// Append content to the element
$ ("# Content"). append ("<p> Yao retired... </p> ");
})
</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 # contentCopy codeThe Code is as follows: <script type = "text/javascript">
JQuery (function (){
// Add span to the end of content1
$ ("# Content"). after ("<p> Yao Ming retired... </p> ");
})
</Script>

2. Append content to different elements
HtmlCopy codeThe Code is as follows: <div id = "content1" style = "border: 1px solid red">
<P> bright moonlight in front of the window </p>
</Div>
<Span> suspected ground cream </span>

JavascriptCopy codeThe Code is as follows: <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
HtmlCopy codeThe Code is as follows: <div>
<Div id = "content">
<P> append a news post to mE </p>
</Div>

JavascriptCopy codeThe Code is as follows: <script type = "text/javascript">
JQuery (function (){
// Append content at the beginning of the element
$ ("# Content"). prepend ("<p> header </p> ");
})
</Script>

4. Add content at the beginning of different elements
HtmlCopy codeThe Code is as follows: <div id = "content">
<P> append a news post to mE </p>
</Div>
<Span> suspected ground cream </span>

JavascriptCopy codeThe Code is as follows: <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.Copy codeThe Code is as follows: <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
HtmlCopy codeThe Code is as follows: <form id = "form1" runat = "server">
<Span> include me in div </span>
</Form>

JavascriptCopy codeThe Code is as follows: <script type = "text/javascript">
JQuery (function (){
$ ("Span"). wrap ("<B> </B> ");
})
</Script>

6. contain multiple html elements with specified elements
WarpAll (html)
HtmlCopy codeThe Code is as follows: <form id = "form1" runat = "server">
<P> p content </p>
<P> p content </p>
<P> p content </p>
<P> p content </p>
<P> p content </p>
</Form>

JavascriptCopy codeThe Code is as follows: <script type = "text/javascript">
JQuery (function (){
$ ("P"). wrapAll ("<div style = 'border: 1px solid red'> <p> </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 code
<P> include the text of the p tag with the B tag </p>
<P> contain the text of the p tag with the B tag. </p>Copy codeThe Code is as follows: javascript
<Script type = "text/javascript">
JQuery (function (){
$ ("P"). wrapInner ("<B> </B> ");
})
</Script>