jQuery append() vs appendChild()

Hier einige Beispiel-code:

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>

Was ist der Unterschied zwischen append() und appendChild()?

Alle Echtzeit-Szenarien?

siehe hier jsperf.com/native-appendchild-vs-jquery-append/4
Ist eine jQuery-Methode, die andere ist eine native JS-Methode, tun Sie beide so ziemlich das gleiche, aber die append() übernimmt mehrere Elemente.
Die Unterseite ist mit einer Bibliothek (z.B. die Häufig verwiesen wird, jQuery), die Spitze ist mit "native" DOM-Methoden zum anfügen des Elements.

InformationsquelleAutor user2067567 | 2013-04-10

87

Der Hauptunterschied ist, dass appendChild ist eine DOM-Methode und append ist eine jQuery-Methode. Der zweite verwendet die erste, wie Sie sehen können, auf jQuery source code
```
append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.appendChild( elem );
        }
    });
},
```
Wenn Sie mit jQuery-Bibliothek auf Ihr Projekt, werden Sie sicher sein, immer mit append beim hinzufügen von Elementen auf der Seite.
- Wissen Sie, warum append "sicher" und appendChild-geht nicht? Was bedeutet domManip tun?
- durch sichere ich damit sagen, dass wenn du mit jquery dann sind Sie sicher zu verwenden ist immer Anhängen (es gibt keine situation, wo DOM appendchild ist bevorzugt). In Bezug auf domManip, es scheint das wichtigste Ziel ist, mithilfe von DOM DocumentFragments. Hier Sie haben eine Beschreibung der Methode und der hier Sie haben die offizielle Wort von John Resig über die Motivation hinter der Verwendung von Fragmenten
- javascript hat auch einen ParentNode.append() jetzt. bitte überprüfen Sie @SagarV-Antwort für weitere Informationen.
InformationsquelleAutor Claudio Redi
30

Nicht mehr

nun append eine Methode in JavaScript

MDN-Dokumentation über die append-Methode

Zitieren MDN

Den ParentNode.append Methode fügt eine Reihe von Node-Objekten oder DOMString Objekte nach dem letzten Kind der ParentNode. DOMString Gegenstände als gleichwertige Text-Knoten.

Dies ist nicht unterstützt durch IE und Kanten, aber auch unterstützt durch Chrom - (54+), Firefox(49+) und Opera(39+).

Den JavaScript-append ist ähnlich wie die jQuery append.

Können Sie mehrere Argumente übergeben.

JS:
```
var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(elm.innerHTML);
```
HTML:
```
<div id="div1"></div>
```
- MDN nicht sagen, was jetzt in der javascript-Spezifikation gibt ES
InformationsquelleAutor Sagar V
15

append ist eine jQuery-Methode zum Anhängen einige Inhalte oder HTML-Code ein element.
```
$('#example').append('Some text or HTML');
```
appendChild ist ein reiner DOM-Methode für das hinzufügen eines untergeordneten Elements.
```
document.getElementById('example').appendChild(newElement);
```
InformationsquelleAutor Fenton
7

Ich weiß, das ist eine alte und beantwortete die Frage und ich bin nicht auf der Suche nach Stimmen, ich möchte nur hinzufügen, eine zusätzliche kleine Sache, die ich denke, könnte Neulingen helfen.

ja appendChild ist ein DOM Methode und append ist JQuery Methode aber praktisch der entscheidende Unterschied ist, dass appendChild nimmt ein Knoten als parameter, die ich meine, wenn Sie wollen, fügen Sie einen leeren Absatz am DOM-Sie erstellen müssen, die p element zuerst

var p = document.createElement('p')

dann können Sie es hinzufügen, um den DOM in der Erwägung, dass JQuery append erstellt, die Knoten für Sie und fügt Sie an der DOM-gleich, ob es ein text-element oder ein html-element
oder für eine Kombination!

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

InformationsquelleAutor kapreski
5

appendChild ist ein DOM vanilla-js Funktion.

append ist eine jQuery-Funktion.

Jede hat Ihre eigenen Macken.

InformationsquelleAutor Neal
0

appendChild ist eine Reine javascript Methode, wo, wie append ist ein jQuery Methode.

InformationsquelleAutor Krishna

Den JavaScript appendchild Methode verwenden Sie zum Anhängen eines Elements zu einem anderen element. Die jQuery Append element macht die gleiche Arbeit aber sicherlich in weniger Anzahl der Zeilen:

Nehmen wir ein Beispiel zum Anhängen eines Elements in einer Liste:

a) Mit JavaScript

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) Mit jQuery

$("#myList").append("<li>jQuery</li>")

InformationsquelleAutor Diana J.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Nicht mehr