The difference between append (), prepend (), after (), before () in JQ

Source: Internet
Author: User

1, append ()-Inserts the content at the end of the selected element (the end of the content, for example , a tag, which isadded before the </a> the tag) .

2, prepend ()-Insert the content at the beginning of the selected element (the beginning of the content, for example , a tag, thenadd something after the < a> the tag)

3,after ()-insert the content after the selected element (the end of the element, for example , there is a tag, then the </a> the label after the addition of things)

4,before ()-Insert the content before the selected element (the beginning of the content, for example, there is a tag, then the <a> the tag before adding something)

So we often use the table element to add, generally with apend and prepend, because it is before the </table> tag.

For example, BTN1 and Btn3 two buttons, two tables, not uploaded nouploaded and uploaded uploaded. If the list is not uploaded, one row or a few rows, press BTN1, then move the rows of data to the uploaded table.

In the uploaded table, select one or more rows, press BTN3, and move a few rows of data to the non-uploaded table.

$ (document). Ready (function () {

$ ("#btn1"). On ("click", Function () {
$ (' #nouploaded tbody:checked '). Parents (' tr '). AppendTo (' #uploaded ');
$ ("#nouploaded tbody:checked"). Parents (' tr '). Remove ();
})
$ ("#btn3"). On ("click", Function () {

$ (' #uploaded tbody:checked '). Parents (' tr '). AppendTo (' #nouploaded ');

$ ("#uploaded tbody:checked"). Parents (' tr '). Remove ();
})


})

The difference between append (), prepend (), after (), before () in JQ

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.