Ecco un po 'di codice di esempio:

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>

Qual'è la differenza tra append()e appendChild()?
Qualche scenario in tempo reale?

La differenza principale è che appendChildè un metodo DOM ed appendè un metodo jQuery. Il secondo usa il primo come puoi vedere sul codice sorgente di jQuery

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

Se stai usando la libreria jQuery sul tuo progetto, sarai sempre sicuro di usarlo appendquando aggiungi elementi alla pagina.

Non più

ora append è un metodo in JavaScript

Documentazione MDN sul metodo di aggiunta

Citando MDN

Il ParentNode.appendmetodo inserisce un insieme di oggetti o DOMStringoggetti Node dopo l'ultimo figlio di ParentNode. DOMStringgli oggetti vengono inseriti come nodi di testo equivalenti.

Questo non è supportato da IE e Edge ma supportato da Chrome (54+), Firefox (49+) e Opera (39+).

L'append di JavaScript è simile all'append di jQuery.

Puoi passare più argomenti.

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 è un metodo jQuery per aggiungere contenuto o HTML a un elemento.

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

appendChild è un metodo DOM puro per l'aggiunta di un elemento figlio.

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

So che questa è una domanda vecchia e con risposta e non sto cercando voti, voglio solo aggiungere una piccola cosa in più che penso possa aiutare i nuovi arrivati.

si appendChildè un DOMmetodo ed è un metodo appendJQuery ma praticamente la differenza fondamentale è che appendChildprende un nodo come parametro con ciò intendo dire che se vuoi aggiungere un paragrafo vuoto al DOM devi pprima creare quell'elemento

var p = document.createElement('p')

quindi puoi aggiungerlo al DOM mentre JQuery appendcrea quel nodo per te e lo aggiunge subito al DOM che si tratti di un elemento di testo o di un elemento html o di una combinazione!

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

appendChildè un DOM vanilla-js .

append è una funzione jQuery.

Ognuno di loro ha le proprie peculiarità.

appendChildè un metodo javascript puro dove as appendè un metodo jQuery .

Il metodo JavaScript appendchild può essere utilizzato per aggiungere un elemento a un altro elemento. L' elemento jQuery Append fa lo stesso lavoro ma sicuramente in un numero inferiore di righe:

Facciamo un esempio per aggiungere un elemento in un elenco:

a) Con 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) Con jQuery

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