Qual è la differenza tra appendChild, insertAdjacentHTML e innerHTML

Question

Desidero sapere qual è la differenza tra appendChild, insertAdjacentHTML e innerHTML.

Penso che le loro funzionalità siano simili ma voglio capire chiaramente in termini di utilizzo e non di velocità di esecuzione.

1. Per esempio, posso usare innerHTML per inserire un nuovo tag o testo in un altro tag in HTML, ma sostituisce il contenuto corrente in quel tag invece di aggiungere.

2. Se mi piacerebbe farlo in quel modo (non sostituire) ho bisogno di usare insertAdjacentHTML e posso gestire dove voglio inserire un nuovo elemento (beforebegin, afterbegin, beforeend, afterend)

3. E il ultimo se voglio creare (non inserire nel tag corrente) un nuovo tag e inserirlo in HTML ho bisogno di usare appendChild.

---

Am I comprendere correttamente? O c'è qualche differenza tra questi tre?

Answer 1

Uno che conosco innerHTML può afferrare 'inner html', appendChild e insertAdjacentHTML non può;

esempio:

<div id="example"><p>this is paragraph</p><div> 

js:

var foo = document.getElementById('example').innerHTML; 

finali quindi ora

foo = '<p>this is paragraph</p>'; 

Answer 2

Documenti:

appendChild

insertAdjacentHTML

innerHtml

innerHTML vs appendChild() performance

insertAdjacentHTML vs innerHTML vs appendChild performance

Answer 3

I metodi appendChild aggiunge un elemento al DOM.

La proprietà innerHTML e il metodo insertAdjacentHTML prendono una stringa anziché un elemento, quindi devono analizzare la stringa e creare elementi da essa, prima che possano essere inseriti nel DOM.

La proprietà innerHTML può essere utilizzata sia per ottenere e impostare il codice HTML per il contenuto di un elemento.

Answer 4

• element.innerHTML

  Da MDN:

  set innerHTML o ottiene la sintassi HTML che descrive discendenti dell'elemento.

  durante la scrittura innerHTML, che verrà sovrascrivere il contenuto del elemento di origine. Ciò significa che l'HTML deve essere caricato e ri-analizzato. Questo non è molto efficiente specialmente quando si usano loop interni.

• node.appendChild

  Da MDN:

  Aggiunge un nodo alla fine della lista dei figli di un nodo padre specificato. Se il nodo esiste già, viene rimosso dal nodo padre corrente, quindi aggiunto al nuovo nodo padre.

  Questo metodo è supportato da tutti i browser ed è un modo molto più semplice di inserire nodi, testo, dati, ecc. Nel DOM.

• element.insertAdjacentHTML

  Da MDN:

  analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nel albero DOM in una posizione specificata. [...]

  Questo metodo è supportato anche da tutti i browser.

Answer 5

@Guffa fece spiegare la differenza principale cioè innerHTML e insertAdjacentHTML bisogno di analizzare la stringa prima di aggiungere al DOM.

Inoltre, vedere questo jsPerf che ti dirà che generalmente appendChild è più veloce per il lavoro che fornisce.