Aquí hay un código de muestra:

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>

¿Cuál es la diferencia entre append()y appendChild()?
¿Algún escenario en tiempo real?

La principal diferencia es que appendChildes un método DOM y appendes un método jQuery. El segundo usa el primero como puede ver en el código fuente de jQuery

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

Si está usando la biblioteca jQuery en su proyecto, estará seguro de usarla siempre appendal agregar elementos a la página.

No más

ahora agregar es un método en JavaScript

Documentación de MDN sobre el método de adición

Citando MDN

El ParentNode.appendmétodo inserta un conjunto de objetos Node u DOMStringobjetos después del último hijo de ParentNode. DOMStringlos objetos se insertan como nodos de texto equivalentes.

Esto no es compatible con IE y Edge, pero sí con Chrome (54+), Firefox (49+) y Opera (39+).

El anexo de JavaScript es similar al anexo de jQuery.

Puede pasar varios argumentos.

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 es un método jQuery para agregar contenido o HTML a un elemento.

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

appendChild es un método DOM puro para agregar un elemento hijo.

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

Sé que esta es una pregunta vieja y respondida y no estoy buscando votos, solo quiero agregar una pequeña cosa adicional que creo que podría ayudar a los recién llegados.

sí, appendChildes un DOMmétodo y appendes el método JQuery, pero prácticamente la diferencia clave es que appendChildtoma un nodo como parámetro, quiero decir, si desea agregar un párrafo vacío al DOM, pprimero debe crear ese elemento

var p = document.createElement('p')

luego puede agregarlo al DOM, mientras que JQuery appendcrea ese nodo para usted y lo agrega al DOM de inmediato, ya sea un elemento de texto, un elemento html o una combinación.

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

appendChildes una función DOM vanilla-js .

append es una función de jQuery.

Cada uno tiene sus propias peculiaridades.

appendChildes un método javascript puro donde como appendes un método jQuery .

El método appendchild de JavaScript se puede utilizar para agregar un elemento a otro elemento. El elemento Append de jQuery hace el mismo trabajo pero ciertamente en menos líneas:

Tomemos un ejemplo para agregar un elemento en una lista:

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