jquery Basics: The difference between append, prepend, after, before, Appendto

Source: Internet
Author: User

Append () Inserts the specified content in front of the end tag of the selected element (that is, the interior of the selected element).
<HTML>    <Head>      <Scripttype= "Text/javascript"src= "/jquery/jquery.js"></Script>      <Scripttype= "Text/javascript">
$ (). Ready (function() {$ ("Button"). Click (function() {$ ("span"). Append ("<a href="#">ddddd</a>")})
})</Script> </Head><Body> <span>Aaaaaaaaaaaaaaa</span><Button>After function</Button></Body></HTML>

The results are as follows:

<span>aaaaaaaaaaaaaaa<a href= "#" >ddddd</a></span>
More than one a tag inside the span tag

After () inserts the specified content after the end tag of the selected element (that is, outside of the selected element).
<HTML>    <Head>        <Scripttype= "Text/javascript"src= "/jquery/jquery.js"></Script>       <Scripttype= "Text/javascript">$ (). Ready (function() {$ ("Button"). Click (function() {$ ("span"). After ("<a href="#">ddddd</a>")})
})</Script></Head><Body> <span>Aaaaaaaaaaaaaaa</span><Button>After function</Button></Body></HTML>

The results are as follows:

<span>aaaaaaaaaaaaaaa</span>
<a href= "#" >ddddd</a>

The span tag has one more a tag behind it.

AppendTo () still inserts the specified content in front of the end tag of the selected element (that is, the interior of the selected element), except that the jquery function does not have the same wording.
<HTML>    <Head>      <Scripttype= "Text/javascript"src= "/jquery/jquery.js"></Script>      <Scripttype= "Text/javascript">
$ (). Ready (function() {$ ("Button"). Click (function() {//$ ("span"). AppendTo ("<a href=" # ">ddddd</a>"), so the wording is incorrect            $("<a href="#">ddddd</a>"). AppendTo ("span")        })
})</Script></Head><Body>    <span>Aaaaaaaaaaaaaaa</span><Button>After function</Button></Body></HTML>

The results are as follows:

<span>aaaaaaaaaaaaaaa<a href= "#" >ddddd</a></span>
More than one a tag inside the span tag

The effect is the same as the APPEND function, except that they are written in the opposite way.

The difference between pretend () and before () is the same as the difference between append () and after ().

jquery Basics: The difference between append, prepend, after, before, Appendto

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.