JavaScript Aggiungi dati a Div

1. Usa innerHTML per aggiungere dati a div in JavaScript
2. Usa appendChild per aggiungere dati a div in JavaScript
3. Usa insertAdjacentHTML() per aggiungere dati a div in JavaScript
4. Usa append() di jQuery per aggiungere dati a Div

Questo tutorial introduce come aggiungere dati a div usando JavaScript.

Usa innerHTML per aggiungere dati a div in JavaScript

In questo metodo, selezioniamo prima il div utilizzando uno dei selettori, ad esempio getElementById, getElementByTag, querySelector, ecc. Quindi aggiungiamo i dati all’attributo innerHTML di div. Questo metodo ha uno svantaggio: rimuove tutti i listener di eventi esistenti sul div selezionato. Distruggerà anche tutti i nodi contenuti all’interno e li sostituirà con quelli nuovi. Tutti i riferimenti agli elementi andranno persi.

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

Usa appendChild per aggiungere dati a div in JavaScript

Come il metodo precedente, selezioniamo prima il div utilizzando uno dei selettori. Ma invece di innerHTML, usiamo appendChild a causa dei problemi discussi nel metodo precedente. Prima di aggiungere un figlio, dobbiamo creare il nodo di testo.

var targetDiv = document.getElementById('ID');
var content = document.createTextNode('data that you want to add');
targetDiv.appendChild(content);

Usa insertAdjacentHTML() per aggiungere dati a div in JavaScript

Come il secondo metodo, questo metodo è un’alternativa migliore al primo metodo. insertAdjacentHTML() non analizza l’elemento e inoltre non interferisce con gli elementi esistenti all’interno. È molto più veloce di innerHTML. Ci aiuta anche a specificare la posizione in cui inserire i dati. Come i metodi precedenti, selezioniamo prima il div, e poi usiamo insertAdjacentHTML() per aggiungere i dati nella posizione richiesta.

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

Usa append() di jQuery per aggiungere dati a Div

La funzione append accetta l’input del contenuto che deve essere aggiunto e può essere chiamata direttamente su un tag utilizzando la sintassi jQuery. Questo metodo ha anche tutti gli svantaggi del metodo innerHTML.

$('.divd').append('<p>Test</p>');