Voici un exemple de 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>

Quelle est la différence entre append()et appendChild()?
Des scénarios en temps réel?

La principale différence est qu'il appendChilds'agit d'une méthode DOM et d' appendune méthode jQuery. Le second utilise le premier comme vous pouvez le voir sur le code source jQuery

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

Si vous utilisez la bibliothèque jQuery sur votre projet, vous serez toujours en sécurité appendlors de l'ajout d'éléments à la page.

Plus maintenant

maintenant append est une méthode en JavaScript

Documentation MDN sur la méthode d'ajout

Citant MDN

La ParentNode.appendméthode insère un ensemble d'objets ou d' DOMStringobjets Node après le dernier enfant du ParentNode. DOMStringles objets sont insérés en tant que nœuds de texte équivalents.

Ceci n'est pas pris en charge par IE et Edge mais pris en charge par Chrome (54+), Firefox (49+) et Opera (39+).

L'ajout de JavaScript est similaire à l'ajout de jQuery.

Vous pouvez transmettre plusieurs arguments.

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 est une méthode jQuery pour ajouter du contenu ou du HTML à un élément.

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

appendChild est une méthode DOM pure pour ajouter un élément enfant.

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

Je sais que c'est une question ancienne et avec réponse et je ne cherche pas de votes, je veux juste ajouter une petite chose supplémentaire qui, je pense, pourrait aider les nouveaux arrivants.

oui appendChildest une DOMméthode et est une méthode appendJQuery mais pratiquement la principale différence est que appendChildprend un nœud comme paramètre, je veux dire si vous voulez ajouter un paragraphe vide au DOM, vous devez d'abord créer cet pélément

var p = document.createElement('p')

alors vous pouvez l'ajouter au DOM tandis que JQuery appendcrée ce nœud pour vous et l'ajoute immédiatement au DOM, que ce soit un élément de texte ou un élément html ou une combinaison!

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

appendChildest une fonction DOM vanilla-js .

append est une fonction jQuery.

Ils ont chacun leurs propres bizarreries.

appendChildest une méthode javascript pure où appendest une méthode jQuery .

La méthode JavaScript appendchild peut être utilisée pour ajouter un élément à un autre élément. L' élément jQuery Append fait le même travail mais certainement en moins de lignes:

Prenons un exemple pour ajouter un élément dans une liste:

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

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