Append Vs AppendChild JQuery

Question

Ecco alcuni esempi di codice:

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> 

Qual è la differenza tra append e appendChild.

Eventuali scenari in tempo reale?

PS: Può essere una domanda stupida voglio solo sapere la differenza esatta

Answer 1

La differenza principale è che appendChild è un metodo DOM e append è un metodo jQuery. La seconda utilizza il primo, come si può vedere su jQuery codice sorgente

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

Se stai usando libreria jQuery sul vostro progetto, sarete al sicuro utilizzando sempre append quando si aggiungono elementi alla pagina.

Answer 2

appendChild è una funzione DOM vanilla-js.

append è una funzione jQuery.

Ognuno di essi ha i propri capricci.

Answer 3

append è un metodo jQuery per aggiungere contenuto o HTML a un elemento.

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

appendChild è un metodo DOM puro per l'aggiunta di un elemento figlio.

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

Answer 4

appendChild è un metodo puro JavaScript dove come append è un metodojQuery.

Answer 5

So che questa è una domanda vecchia e risposta e non sto cercando voti Voglio solo aggiungere una piccola cosa in più che penso possa aiutare i nuovi arrivati.

sì appendChild è un metodo DOM e append è il metodo JQuery, ma praticamente la differenza fondamentale è che appendChild prende un nodo come parametro con questo voglio dire, se si desidera aggiungere un paragrafo vuoto al DOM è necessario creare che p primo elemento di

var p = document.createElement('p')

allora si può aggiungere al DOM, mentre JQuery append crea quel nodo per voi e lo aggiunge al DOM subito che si tratti di un elemento di testo o elemento o una combinazione di HTML!

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

Answer 6

Non più

ora accoda è un metodo in JavaScript

MDN documentation on append method

Citando MDN

Il metodo ParentNode.append inserisce una serie di oggetti nodo o DOMString oggetti dopo l'ultimo figlio di ParentNode. Gli oggetti DOMString vengono inseriti come nodi di testo equivalenti.

Questo non è supportato da IE e Edge ma è supportato da Chrome (54+), Firefox (49+) e Opera (39+).

L'append di JavaScript è simile all'app di jQuery.

È possibile passare più argomenti.

var elm = document.getElementById('div1'); 
 
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div')); 
 
console.log(elm.innerHTML);

<div id="div1"></div>