Metodo append
Il metodo append consente di inserire
alla fine di un elemento un altro elemento. Come parametro
accetta un elemento, generalmente creato
tramite createElement,
oppure una stringa. È possibile aggiungere più
elementi o stringhe contemporaneamente, elencandoli separati da virgola.
Sintassi
genitore.append(elemento o stringa);
Esempio
Creiamo un paragrafo, impostiamogli del testo
e inseriamolo nella pagina alla fine del blocco #parent:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.append(p);
Risultato dell'esecuzione del codice:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Esempio
Inseriamo più paragrafi contemporaneamente alla fine
del blocco #parent:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p1 = document.createElement('p');
p1.textContent = 'a';
let p2 = document.createElement('p');
p2.textContent = 'b';
parent.append(p1, p2);
Risultato dell'esecuzione del codice:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Esempio
Usiamo una stringa come parametro del metodo:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Risultato dell'esecuzione del codice:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Esempio
Dato un ul.
Inseriamoci 9 tag li,
e impostiamo i loro testi come numeri ordinali:
<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.textContent = i;
parent.append(li);
}
Risultato dell'esecuzione del codice:
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Esempio
Riempiamo una tabella con tr e td:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // creiamo una tr
// Riempiamo la tr con td:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // creiamo una td
td.textContent = j; // scriviamo del testo al suo interno
tr.append(td); // aggiungiamo la td creata alla fine della tr
}
table.append(tr); // aggiungiamo la tr creata alla fine della tabella
}
Risultato dell'esecuzione del codice:
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Vedi anche
-
metodo
prepend,
che inserisce elementi all'inizio -
metodo
appendChild,
che inserisce elementi alla fine -
metodo
insertBefore,
che inserisce un elemento prima di un altro elemento -
metodo
insertAdjacentElement,
che inserisce un elemento in una posizione specificata -
metodo
insertAdjacentHTML,
che inserisce tag in una posizione specificata
