Hier ist ein Beispielcode:

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()?
Irgendwelche Echtzeitszenarien?

Der Hauptunterschied besteht darin, dass appendChildes sich um eine DOM-Methode und appendeine jQuery-Methode handelt. Der zweite verwendet den ersten, wie Sie im jQuery-Quellcode sehen können

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

Wenn Sie die jQuery-Bibliothek in Ihrem Projekt verwenden, können Sie diese sicher immer verwenden, appendwenn Sie der Seite Elemente hinzufügen.

Nicht mehr, nicht länger

Jetzt ist Anhängen eine Methode in JavaScript

MDN-Dokumentation zur Append-Methode

MDN zitieren

Die ParentNode.appendMethode fügt eine Reihe von Knotenobjekten oder DOMStringObjekten nach dem letzten untergeordneten Element des Knotens ein ParentNode. DOMStringObjekte werden als äquivalente Textknoten eingefügt.

Dies wird nicht von IE und Edge unterstützt, sondern von Chrome (54+), Firefox (49+) und Opera (39+).

Das Anhängen von JavaScript ähnelt dem Anhängen von jQuery.

Sie können mehrere Argumente übergeben.

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

<div id="div1"></div>

append ist eine jQuery-Methode zum Anhängen von Inhalten oder HTML an ein Element.

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

appendChild ist eine reine DOM-Methode zum Hinzufügen eines untergeordneten Elements.

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

Ich weiß, dass dies eine alte und beantwortete Frage ist und ich suche nicht nach Stimmen. Ich möchte nur eine zusätzliche Kleinigkeit hinzufügen, von der ich denke, dass sie Neulingen helfen könnte.

yes appendChildist eine DOMMethode und appendeine JQuery-Methode, aber praktisch besteht der Hauptunterschied darin, dass appendChildein Knoten als Parameter verwendet wird. Wenn Sie dem DOM einen leeren Absatz hinzufügen möchten, müssen Sie dieses pElement zuerst erstellen

var p = document.createElement('p')

Dann können Sie es dem DOM hinzufügen, während JQuery appenddiesen Knoten für Sie erstellt und sofort zum DOM hinzufügt, unabhängig davon, ob es sich um ein Textelement, ein HTML-Element oder eine Kombination handelt!

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

appendChildist eine DOM- Vanille-js- Funktion.

append ist eine jQuery-Funktion.

Sie haben jeweils ihre eigenen Macken.

appendChildist eine reine Javascript- Methode, wobei appendes sich um eine jQuery- Methode handelt.

Mit der JavaScript- Methode appendchild können Sie ein Element an ein anderes Element anhängen. Das jQuery Append- Element erledigt die gleiche Arbeit, aber sicherlich in weniger Zeilen:

Nehmen wir ein Beispiel zum Anhängen eines Elements an eine 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>")