jquery element Control (append element/append content) Introduction and application _jquery

append elements inside and outside the element
Append,prepend: Adding to child elements
Before,after: Add as sibling element
Html:

Copy Code code as follows:

<div id= "Content" >
<p> append a news message to me </p>
</div>

Javascript:

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
Appending content inside an element
$ ("#content"). Append ("<p> Yao Ming retired ...</p>");
})
</script>

Add elements to the #content, this is the <p> retired Yao ...</p> as a child element added to the #content, if you want to add elements outside the element, need to use after, so you can put <p> Yao Ming retired ...</p> is appended to #content as the sibling element

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
Add span to the back of the Content1
$ ("#content"). After ("<p> Yao Ming retired ...</p>");
})
</script>

additional content at different locations of elements
Html

Copy Code code as follows:

<div id= "Content1" style= "border:1px solid Red" >
<p> window bright Moon light </p>
</div>
<span> the ground frost </span>

Javascript

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
Add span to the back of the Content1
$ ("span"). Appendto ("#content1");
})
</script>

append content at start of element
Html

Copy Code code as follows:

<div>
<div id= "Content" >
<p> append a news message to me </p>
</div>

Javascript

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
Append content at start of element
$ ("#content"). Prepend ("<p> head </p>");
})
</script>

Iv. appending content at the beginning of different elements
Html

Copy Code code as follows:

<div id= "Content" >
<p> append a news message to me </p>
</div>
<span> the ground frost </span>

Javascript

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
Append content at the beginning of different elements
$ ("span"). Prependto ("#content");
})
</script>

Add elements to the #content, which is to add <span> to the ground frost </span> as a child element to the beginning of the #content, if you want to add the starting element outside the element, need to use before, so you can put < Span> the ground frost </span> as the sibling element appended to the #content began

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
Append content at the beginning of different elements
$ ("span"). Before ("#content");
})
</script>

Elements containing elements in the specified structure
Warp (HTML)
The HTML element is specified in the specified HTML, but the specified element must not contain sibling elements, otherwise it will not run correctly and does not contain a generic text string, and the following code contains the P tag with a div tag
Html

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<span> include me in div </span>
</form>

Javascript

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
$ ("span"). Wrap ("<b></b>");
})
</script>

include multiple HTML elements with the specified element
Warpall (HTML)
Html

Copy Code code 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>

Javascript

Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
$ ("P"). Wrapall ("<div style= ' border:1px solid red ' ><p></p></div>");
})
</script>

Seven, with the specified label contains child elements
Wrapinner (HTML)
As with the Warp method, the HTML element is specified in HTML, for example:
The code with the B tag containing the text in the P tag is as follows:
HTML code
<p> include the text of the P label with a B tag </p>
<p> also include the text of P tags in the b tag </p>

Copy Code code as follows:

Javascript
<script type= "Text/javascript" >
JQuery (function () {
$ ("P"). Wrapinner ("<b></b>");
})
</script>