Jquery append () and appendto ()

Source: Internet
Author: User

 

Although the two methods have been learned before writing the jquerydom operation-when changing the Page Based on commands,

However, I couldn't remember the difference between append () and appendto () when I was reading a book by car today. Instead, continue learning.

Only after deep learning can you learn more solidly. Otherwise, you can't remember the head that often forgets something.

Let's take a look at the above descriptions of the API, which helps us better understand the two methods:

Append (content)

Append content to each matching element.

This operation is similar to executing the appendchild method on the specified elements and adding them to the document.

Appendto (content)

Append all matched elements to another specified element set.

In fact, this method is used to reverse the conventional $ (a). append (B) operation, that is, not to append B to A, but to append A to B.


This seems to have been quite clear, but without passing through the instance, how can I understand it so deeply? Haha.

Append (content)

Append content to <font color = 'red'> Each Matching Element </font>.
<Br/>
This operation is similar to executing the appendchild method on the specified elements and adding them to the document.

<Br/>
<P class = 'append _ P'> welcome </P>

<P class = 'append _ P'> welcome </P>

<Input type = 'button 'id = 'append _ click' value = 'append example'/>

<Br/>
Appendto (content)

Append <font color = 'red'> all matched elements </font> to another specified element set.
<Br/>
In fact, this method is used to reverse the conventional $ (a). append (B) operation, that is, not to append B to A, but to append A to B.

<Br/>
<P class = 'appendto _ P'> welcome </P>

<P class = 'appendto _ P'> welcome </P>

<Input type = 'button 'id = 'appendto _ click' value = 'appendto example'/> $ (document). Ready (function (){
$ ('# Append_button'). Click (function (){
$ ('P. append_p '). append ('<B> <a href = "http://www.xiaoxiaozi.com/" target = "_ blank"> xiaoxiaozi.com </a> </B> ');
});

$ ('# Appendto_button'). Click (function (){
$ ('<B> <a href = "http://www.xiaoxiaozi.com/" target = "_ blank"> xiaoxiaozi.com </a> </B> '). appendto ('p. appendto_p ');
});
});

Oh, have you seen the result? This is the case:

Append () is the object to be selected, followed by the element content to be inserted in the object

Before appendto (), the content of the element to be inserted is followed by the object to be selected.

Apply what wangsong76 says:

But $ ("p"). append ("any string"); and $ ("any string"). appendto ("p"); are these two operations equal?

It is not a simple equivalent, but conditional. Well.

But unlike wangsong76, it is the difference between IE and Firefox. I don't think so.

For example, the HTML part is the same as the preceding example. Let's change the JS part.

$ (Document). Ready (function (){
$ ('# Append_button'). Click (function (){
$ ('P. append_p '). append ('xiaoxiaozi. com ');
});

$ ('# Appendto_button'). Click (function (){
$ ('Xiaoxiaozi. com'). appendto ('p. appendto_p ');
});
});

See it? Does the second function have any function? Why?

I think $ ('pure string, non-HTML statement or object') cannot be considered as a jquery object in jquery.

This is an article I have reprinted. The address below is reprinted. The last sentence is the reason why I reproduced it. It is the essence of this blog.

    Author: simaopig
    Address: http://www.xiaoxiaozi.com/2009/05/31/694/
    The author and original source must be indicated in the form of links when all copyrights are reprinted!

    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.