Método appendChild

O método appendChild permite inserir no final de um elemento outro elemento. É mais utilizado após criar um elemento com createElement.

Sintaxe

elementoPai.appendChild(elemento);

Exemplo

Vamos criar um parágrafo, definir seu texto e colocá-lo na página no final do bloco #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);

Resultado da execução do código:

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

Exemplo

Dado um ul. Vamos colocar nele 9 tags li, e fazer seus textos serem números ordinais:

<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);
}

Resultado da execução do código:

<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>

Exemplo

Vamos preencher a tabela trs e tds:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // criamos um tr
	
	// Preenchemos o tr com tds:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // criamos um td
		td.textContent = j; // escrevemos texto nele
		
		tr.appendChild(td); // adicionamos o td criado no final do tr
	}
	
	table.appendChild(tr); // adicionamos o tr criado no final da tabela
}

Resultado da execução do código:

<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>

Veja também

método append,
que insere elementos no final
método insertBefore,
que insere um elemento antes de outro elemento
método insertAdjacentElement,
que insere um elemento em um local especificado
método insertAdjacentHTML,
que insere tags em um local especificado