Método appendChild

El método appendChild permite insertar al final de algún elemento otro elemento. Muy a menudo se utiliza después de crear un elemento con createElement.

Sintaxis

padre.appendChild(elemento);

Ejemplo

Vamos a crear un párrafo, establecerle texto y colocarlo en la página al final del bloque #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 de ejecutar el código:

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

Ejemplo

Dado un ul. Vamos a colocar en él 9 etiquetas li, y hacer que su texto sean números ordinales:

<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 de ejecutar el 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>

Ejemplo

Vamos a llenar una tabla con tr y con td:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // creamos un tr
	
	// Llenamos el tr con td:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // creamos un td
		td.textContent = j; // escribimos en él texto
		
		tr.appendChild(td); // añadimos el td creado al final del tr
	}
	
	table.appendChild(tr); // añadimos el tr creado al final de la tabla
}

Resultado de ejecutar el 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>

Véase también

método append,
que inserta elementos al final
método insertBefore,
que inserta un elemento antes de un elemento
método insertAdjacentElement,
que inserta un elemento en un lugar determinado
método insertAdjacentHTML,
que inserta etiquetas en un lugar determinado