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?

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.

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>

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);

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>');

appendChildjest funkcją DOM vanilla-js .

append jest funkcją jQuery.

Każdy z nich ma swoje dziwactwa.

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

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>")