Metodo appendChild

Il metodo appendChild consente di inserire un altro elemento alla fine di un elemento. Viene più spesso utilizzato dopo aver creato un elemento con createElement.

Sintassi

genitore.appendChild(elemento);

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.appendChild(p);

Risultato dell'esecuzione del codice:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Esempio

Dato un ul. Inseriamoci 9 tag li, e facciamo in modo che il loro testo sia il numero d'ordine:

<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.appendChild(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

Compiliamo una tabella con tr e td:

<table id="table"></table>

let parent = document.querySelector('#parent');

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.appendChild(td); // aggiungiamo la td creata alla fine della tr
	}
	
	table.appendChild(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 append,
che inserisce elementi alla fine
metodo insertBefore,
che inserisce un elemento prima di un elemento
metodo insertAdjacentElement,
che inserisce un elemento in una posizione specificata
metodo insertAdjacentHTML,
che inserisce tag in una posizione specificata