Jquery append () and appendto ()

 

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!