3.1 Creazione degli elementi
Lavorare con il DOM (Document Object Model) include non solo la navigazione tra elementi esistenti, ma anche la creazione di nuovi elementi, la loro aggiunta al documento e la rimozione. Ora vediamo vari metodi e approcci per creare e rimuovere elementi nel DOM.
Metodo document.createElement()
Il metodo principale per creare un nuovo elemento nel DOM è document.createElement(). Questo metodo accetta il nome del tag dell'elemento che vuoi creare e restituisce un nuovo elemento vuoto.
Esempio:
const newDiv = document.createElement('div');
Aggiunta di contenuto all'elemento
Dopo aver creato un nuovo elemento, puoi riempirlo con contenuti. Questo può essere testo, altri elementi o una combinazione di entrambi.
Esempio:
const newDiv = document.createElement('div');
newDiv.textContent = 'Questo è un nuovo elemento div';
Puoi anche usare la proprietà innerHTML per aggiungere contenuto HTML.
Esempio:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>Questo è un nuovo elemento div con testo in grassetto</strong>';
3.2 Inserimento degli elementi nel DOM
L'elemento creato deve essere aggiunto al documento. Ci sono diversi metodi per inserire gli elementi nel DOM:
1. Metodo appendChild()
Il metodo appendChild() aggiunge un elemento alla fine dell'elenco dei figli di un elemento padre specificato.
Esempio:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Questo è un vecchio elemento div</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Questo è un nuovo elemento div';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Metodo insertBefore()
Il metodo insertBefore() aggiunge un elemento prima di un elemento figlio specificato del padre.
Esempio:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Questo è un vecchio elemento div</div>
<p>Questo è un paragrafo</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Questo è un nuovo elemento div';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Metodo append()
Il metodo append() aggiunge uno o più nodi o stringhe alla fine dell'elenco dei figli di un elemento padre specificato.
Esempio:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Questo è un vecchio elemento div</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Questo è un nuovo elemento div';
const body = document.querySelector('body');
body.append(newDiv);
4. Metodo prepend()
Il metodo prepend() aggiunge uno o più nodi o stringhe all'inizio dell'elenco dei figli di un elemento padre specificato.
Esempio:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Questo è un vecchio elemento div</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Questo è un nuovo elemento div';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Clonazione degli elementi
Il metodo cloneNode() permette di clonare un elemento. La clonazione può essere profonda (con la copia di tutti gli elementi figli) o superficiale (solo dell'elemento stesso).
Esempio di clonazione profonda:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
Questo è un elemento div
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Esempio di clonazione superficiale:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
Questo è un elemento div
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
L'elemento <div> è stato clonato, come si può vedere dagli stili, ma i suoi elementi figli (il nodo di testo "Questo è un elemento div" e <ul>) non sono stati clonati.
3.4 Rimozione degli elementi
1. Metodo removeChild()
Il metodo removeChild() rimuove un elemento figlio dall'elemento padre.
Esempio:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
Questo è un elemento div
<p>Questo è un paragrafo</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Metodo remove()
Il metodo remove() rimuove un elemento dal DOM direttamente.
Esempio:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Questo è un elemento div</div>
<p>Questo è un paragrafo</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Pulizia del contenuto dell'elemento
Il metodo innerHTML può essere utilizzato per rimuovere tutto il contenuto di un elemento assegnandogli una stringa vuota.
Esempio:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
Questo è un elemento div
<p>Questo è un paragrafo</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Rimozione di tutti gli elementi figli
Per rimuovere tutti gli elementi figli si può usare un ciclo o il metodo innerHTML.
Esempio con ciclo:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
Questo è un elemento div
<p>Questo è un paragrafo</p>
<p>Questo è un paragrafo</p>
<p>Questo è un paragrafo</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Esempio con innerHTML:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
Questo è un elemento div
<p>Questo è un paragrafo</p>
<p>Questo è un paragrafo</p>
<p>Questo è un paragrafo</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION