jQuery append () vs appendChild ()


100

Oto przykładowy kod:

function addTextNode(){
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    para.appendChild(newtext);
    $("#p1").append("HI");
}
<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.<br /></p>
</div>

Jaka jest różnica między append()i appendChild()?
Jakieś scenariusze w czasie rzeczywistym?



Jedna to metoda jQuery, druga to natywna metoda JS. Obie robią prawie to samo, ale metoda append () akceptuje wiele elementów.
adeneo,

Na dole używana jest biblioteka (np. Powszechnie przywoływany jQuery), na górze używane są „natywne” metody DOM do dołączania elementu.
Qantas 94 Heavy,

Odpowiedzi:


106

Główna różnica polega na tym, że appendChildjest to metoda DOM i appendmetoda jQuery. Drugi korzysta z pierwszego, jak widać w kodzie źródłowym jQuery

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.appendChild( elem );
        }
    });
},

Jeśli używasz biblioteki jQuery w swoim projekcie, będziesz zawsze bezpieczny appendpodczas dodawania elementów do strony.


Czy wiesz, dlaczego funkcja append jest „bezpieczna”, a funkcja appendChild nie? Co robi domManip?
Rob Fox,

2
@RobFox: przez safe chciałem powiedzieć, że jeśli używasz jquery, możesz bezpiecznie używać zawsze append (nie ma sytuacji, w której preferowany jest DOM appendchild). W odniesieniu do domManip wydaje się, że głównym celem jest użycie DOM DocumentFragments. Tutaj masz opis metody, a tutaj masz oficjalne słowo Johna Resiga o motywacjach za używaniem fragmentów
Claudio Redi

4
javascript ma również plik ParentNode.append()now. proszę sprawdzić odpowiedź @ SagarV, aby uzyskać więcej informacji.
Jo E.

Chciałem powiedzieć to samo, co @JoE. : zobacz ParentNode.append () .
Lonnie Best

47

Już nie

now append to metoda w JavaScript

Dokumentacja MDN dotycząca metody dołączania

Cytując MDN

ParentNode.appendMetoda wstawia zestaw Node obiektów lub DOMStringobiektów po ostatnim dzieckiem ParentNode. DOMStringobiekty są wstawiane jako równoważne węzły tekstowe.

Nie jest to obsługiwane przez IE i Edge, ale obsługiwane przez Chrome (54+), Firefox (49+) i Opera (39+).

Dołączanie JavaScript jest podobne do dołączania jQuery.

Możesz przekazać wiele argumentów.

var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(elm.innerHTML);
<div id="div1"></div>


4
MDN nie mówi, co jest teraz w javascript, specyfikacja ES tak
Raimonds

18

append to metoda jQuery służąca do dołączania treści lub kodu HTML do elementu.

$('#example').append('Some text or HTML');

appendChild jest czystą metodą DOM do dodawania elementu potomnego.

document.getElementById('example').appendChild(newElement);

9

Wiem, że to stare pytanie, na które udzielono odpowiedzi i nie szukam głosów. Chcę tylko dodać dodatkową rzecz, która może pomóc nowicjuszom.

tak appendChildjest DOMmetodą i appendjest metodą JQuery, ale praktycznie kluczową różnicą jest to, że appendChildprzyjmuje węzeł jako parametr przez to, że jeśli chcesz dodać pusty akapit do DOM, musisz pnajpierw utworzyć ten element

var p = document.createElement('p')

następnie możesz dodać go do DOM, podczas gdy JQuery appendtworzy ten węzeł za Ciebie i dodaje go od razu do DOM, niezależnie od tego, czy jest to element tekstowy, element HTML, czy kombinacja!

$('p').append('<span> I have been appended </span>');



0

appendChildjest czystą metodą javascript , gdzie as appendjest metodą jQuery .


0

AppendChild JavaScript metoda może być użyty do dołączania elementu do innego elementu. Element jQuery Append działa tak samo, ale z pewnością w mniejszej liczbie wierszy:

Weźmy przykład, aby dołączyć element do listy:

a) Z JavaScriptem

var n= document.createElement("LI");                 // Create a <li> node
var tn = document.createTextNode("JavaScript");      // Create a text node
n.appendChild(tn);                                   // Append the text to <li>
document.getElementById("myList").appendChild(n);  

b) Z jQuery

$("#myList").append("<li>jQuery</li>")
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.