javascript - read - Append Vs AppendChild JQuery

react appendchild

Question

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 ?

Cualquier escenario en tiempo real?

PD: Puede ser una pregunta tonta solo quiero saber la diferencia exacta

Answer 1

No más

ahora append es un método en JavaScript

Documentación de MDN en el método de agregar

Citando a MDN

El método ParentNode.append inserta un conjunto de objetos Node o DOMString después del último elemento secundario del ParentNode . DOMString objetos DOMString se insertan como nodos de texto equivalentes.

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

El apéndice de JavaScript es similar al apéndice de jQuery.

Puede pasar múltiples 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>

Answer 2

La principal diferencia es que appendChild es un método DOM y append es un método jQuery. El segundo usa el primero como se puede ver en el código fuente 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á utilizando la biblioteca jQuery en su proyecto, estará seguro siempre utilizando append al agregar elementos a la página.

Answer 3

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í appendChild es un método DOM y append es el método JQuery, pero prácticamente la diferencia clave es que appendChild toma un nodo como parámetro con eso me refiero a que si quieres agregar un párrafo vacío al DOM necesitas crear ese elemento p primero

var p = document.createElement(''p'')

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

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

Answer 4

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 secundario.

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

Answer 5

appendChild es un método de javascript puro donde al append es un método jQuery .

Answer 6

appendChild es una función DOM vanilla-js .

append es una función jQuery.

Cada uno tiene sus propios caprichos.