Was ist der Unterschied zwischen $ .add und $ .append JQuery

Question

Ich frage mich und konnte nicht die beste Dokumentation, die den Unterschied zwischen $ .add und $ .append, wenn wir einzelne Element zum Hinzufügen oder Anhängen an einen Container haben .

Vielen Dank im Voraus

Answer 1

Wenn ein jQuery-Objekt eine Gruppe von DOM-Elementen darstellt, erstellt die .add()-Methode ein neues jQuery-Objekt aus der Vereinigung dieser Elemente und der Elemente, die an die Methode übergeben wurden. Aber es fügt das Element nicht in das DOM ein, d. H. Mit .add() wird das Element zum DOM hinzugefügt, aber um es auf der Seite zu sehen, müssen Sie es in die Seite einfügen, indem Sie eine Methode insertion/append verwenden.

Answer 2

hinzufügen fügt nur das Element mit dem jQuery-Objekt, es in das DOM

Anfügen nicht hinzufügt fügt das Element in das DOM als das Kind.

Answer 3

Sie sind überhaupt nicht verwandt.

.Add()

Elemente hinzufügen zu dem Satz von abgestimmten Elementen.

z.B.

Wenn Sie wollen,

$('div').css('color':'red'); 
$('div').css('background-color':'yellow'); 
$('p').css('color':'red'); 

Dann die Sie tun können,

$('div').css('background-color':'yellow').add('p').css('color':'red'); 

Reference

.append()

Inhalt einfügen, angegeben durch den Parameter, bis zum Ende jedes Elements in der Menge der übereinstimmenden Elemente.

$('div').append('p'); 

wird append p auf allen ausgewählten div in dom ausgewählt.

Reference

Answer 4

.add()

for example: 
<ul> 
    <li>list item 1</li> 
    <li>list item 2</li> 
    <li>list item 3</li> 
</ul> 
<p>a random paragraph</p> 

die Farbe der <li> Elemente ändern UND das <p> Element rot, könnten Sie schreiben:

$("li").css("background-color", "green"); 
$("p").css("background-color", "green"); 

oder Kondensieren des Obigen durch Verwenden von. add()

$("li").add("p").css("background-color", "green"); 

.append()

Wird erstellen ein neues Element zum DOM hinzufügen und wird als ein untergeordnetes Element für das vorhandene angegebene Element angezeigt.

<div>one</div> 
<div>two</div> 

<ol> 
    <li>item1</li> 
    <li>item2</li> 
</ol> 

$("div").append('<p>'); 

wird in Folge:

<div>one</div> 
<p></p> 
<div>two</div> 
<p></p> 

<ol> 
    <li>item1</li> 
    <p></p> 
    <li>item2</li> 
    <p></p> 
</ol>