jQuery append () vs appendChild ()

95

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?

user2067567
fuente
Uno es un método jQuery, el otro es un método JS nativo, ambos hacen prácticamente lo mismo, pero append () acepta varios elementos.
adeneo
La parte inferior usa una biblioteca (por ejemplo, el jQuery comúnmente referenciado), la parte superior usa métodos DOM "nativos" para agregar el elemento.
Qantas 94 Heavy

Respuestas:

104

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.

Claudio Redi
fuente
¿Sabe por qué append es "seguro" y appendChild no lo es? ¿Qué hace domManip?
Rob Fox
2
@RobFox: por seguro quise decir que si está usando jquery, entonces es seguro usar siempre append (no hay ninguna situación en la que se prefiera DOM appendchild). En relación con domManip, parece que el objetivo principal es utilizar DOM DocumentFragments. Aquí tienes una descripción del método y aquí tienes la palabra oficial de John Resig sobre las motivaciones detrás del uso de fragmentos
Claudio Redi
3
javascript también tiene un ParentNode.append()ahora. Consulte la respuesta de @ SagarV para obtener más información.
Jo E.
Iba a decir lo mismo que @JoE. : consulte ParentNode.append () .
Lonnie Best
46

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>

Sagar V
fuente
3
MDN no dice qué hay ahora en javascript, la especificación ES sí lo hace
Raimonds
17

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);
Fenton
fuente
9

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

kapreski
fuente
5

appendChildes una función DOM vanilla-js .

append es una función de jQuery.

Cada uno tiene sus propias peculiaridades.

Naftali alias Neal
fuente
0

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

Krishna
fuente
0

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>")
Diana J.
fuente