web-dev-qa-db-fra.com

jQuery append () vs appendChild ()

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?

javascriptjqueryappendappendchild
75
user2067567

La principale différence est que appendChild est une méthode DOM et que append est une méthode jQuery. Le second utilise le premier comme vous pouvez le voir sur le code source 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 vous utilisez la bibliothèque jQuery sur votre projet, vous pourrez toujours utiliser append lors de l'ajout d'éléments à la page.

87
Claudio Redi

Plus maintenant

maintenant append est une méthode en JavaScript

documentation MDN sur la méthode append

Citant MDN

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

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

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

Vous pouvez passer 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>
30
Sagar V

append est une méthode jQuery pour ajouter du contenu ou du code 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);
15
Fenton

Je sais que c’est une vieille question à réponse et que je ne cherche pas de votes, je veux juste ajouter une petite chose supplémentaire qui, à mon avis, pourrait aider les nouveaux arrivants.

yes appendChild est une méthode DOM et append est une méthode JQuery mais pratiquement, la différence principale est que appendChild prend un nœud en tant que paramètre. vous voulez ajouter un paragraphe vide au DOM dont vous avez besoin pour créer cet élément p en premier

var p = document.createElement('p')

vous pouvez ensuite l'ajouter au DOM alors que JQuery append crée ce nœud pour vous et l'ajoute immédiatement au DOM, qu'il s'agisse d'un élément de texte, d'un élément html ou d'une combinaison!

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

7
kapreski

appendChild est une fonction DOM Vanilla-js .

append est une fonction jQuery.

Ils ont chacun leurs propres bizarreries.

5
Neal

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

Prenons un exemple pour ajouter un élément à 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>")
0
Diana J.

appendChild est une pure méthode javascript où append est une méthode jQuery.

0
Krishna