Quando si usa jQuery, come descritto in questo articolo, il modo più comune per aggiungere nuovo HTML all’interno di un elemento è usare i metodi append() e prepend(). In questo articolo vediamo come ottenere esattamente lo stesso comportamento usando solo JavaScript puro, senza librerie.
Operazioni simili possono essere anche effettuate aggiungendo nuovi tag con il metodo appendChild() .
Struttura HTML di partenza
Partiamo da un div con un po’ di contenuto:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<title>Aggiungere HTML con JS</title>
</head>
<body>
<div id="selDiv">
<p>Paragrafo</p>
</div>
</body>
Il nostro obiettivo è:
- aggiungere un link in coda, come ultimo figlio del
div(equivalente diappend()), - aggiungere un link all’inizio, come primo figlio del
div(equivalente diprepend()).
Aggiungere codice HTML in coda
In JavaScript puro possiamo usare insertAdjacentHTML() con il posizionamento "beforeend":
<script>
const selDiv = document.getElementById("selDiv");
selDiv.insertAdjacentHTML(
"beforeend", '<a href="url">Etichetta</a>'
);
</script>
Il risultato finale sarà:
<div id="selDiv">
<p>Paragrafo</p>
<a href="url">Etichetta</a>
</div>
Aggiungere codice HTML all’inizio
In JavaScript puro usiamo insertAdjacentHTML() con il posizionamento "afterbegin":
<script>
const selDiv = document.getElementById("selDiv");
selDiv.insertAdjacentHTML(
"afterbegin", '<a href="url">Etichetta</a>'
);
</script>
Il risultato sarà:
<div id="selDiv">
<a href="url">Etichetta</a>
<p>Paragrafo</p>
</div>
Altre opzioni utili con insertAdjacentHTML()
Oltre a beforeend e afterbegin, insertAdjacentHTML() accetta anche:
"beforebegin"→ inserisce prima dell’elemento,"afterend"→ inserisce dopo l’elemento.
Esempio:
selDiv.insertAdjacentHTML(
"beforebegin", "<p>Testo prima del div</p>"
);
selDiv.insertAdjacentHTML(
"afterend", "<p>Testo dopo il div</p>"
);
Questo consente di replicare qualsiasi inserimento HTML che normalmente si farebbe con before(), after(), prepend() o append() in jQuery.
Perché usare insertAdjacentHTML()
- Accetta direttamente stringhe HTML, come
append()/prepend()in jQuery. - Non richiede la creazione di oggetti DOM tramite
createElement()quando si ha solo HTML semplice. - È nativo del browser, quindi non ci sono dipendenze da librerie.
Come replicare nel tuo sito
Per adattare l’esempio al tuo sito:
- Sostituisci
id="selDiv"con l’iddel tuo elemento reale. - Cambia il contenuto HTML dentro la stringa (
<a href="...">...</a>) in base alle tue esigenze. - Scegli il posizionamento corretto tra:
"beforebegin""afterbegin""beforeend""afterend"