jQuery append () vs appendChild ()


95

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?



L'une est une méthode jQuery, l'autre est une méthode JS native, elles font toutes les deux à peu près la même chose, mais append () accepte plusieurs éléments.
adeneo

Le bas utilise une bibliothèque (par exemple le jQuery couramment référencé), le haut utilise des méthodes DOM "natives" pour ajouter l'élément.
Qantas 94 Heavy

Réponses:


104

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.


Savez-vous pourquoi append est "sûr" et appendChild ne l'est pas? Que fait domManip?
Rob Fox

2
@RobFox: par safe, je voulais dire que si vous utilisez jquery, vous pouvez utiliser toujours append en toute sécurité (il n'y a pas de situation où DOM appendchild est préféré). En ce qui concerne domManip, il semble que l'objectif principal soit d'utiliser DOM DocumentFragments. Ici vous avez une description de la méthode et ici vous avez le mot officiel de John Resig sur les motivations derrière l'utilisation de fragments
Claudio Redi

3
javascript a également un ParentNode.append()maintenant. Veuillez consulter la réponse de @ SagarV pour plus d'informations.
Jo E.

J'allais dire la même chose que @JoE. : voir ParentNode.append () .
Lonnie Best le

46

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>


3
MDN ne dit pas ce qui est maintenant en javascript, la spécification ES le fait
Raimonds

17

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

9

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



0

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


0

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>")
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.