De appendChild Methode

De methode appendChild maakt het mogelijk om een ander element aan het einde in te voegen. Wordt het meest gebruikt na het creëren van een element met createElement.

Syntaxis

ouder.appendChild(element);

Voorbeeld

Laten we een paragraaf creëren, er tekst in zetten en deze op de pagina plaatsen aan het einde van het blok #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);

Resultaat van de uitgevoerde code:

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

Voorbeeld

Gegeven een ul. Laten we er 9 li tags in plaatsen, en hun tekst de volgnummers maken:

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

Resultaat van de uitgevoerde code:

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

Voorbeeld

Laten we een tabel vullen met tr's en td's:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // creëren een tr
	
	// Vullen de tr met td's:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // creëren een td
		td.textContent = j; // schrijven er tekst in
		
		tr.appendChild(td); // voegen de gemaakte td toe aan het einde van de tr
	}
	
	table.appendChild(tr); // voegen de gemaakte tr toe aan het einde van de tabel
}

Resultaat van de uitgevoerde code:

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

Zie ook

methode append,
die elementen aan het einde invoegt
methode insertBefore,
die een element invoegt vóór een element
methode insertAdjacentElement,
die een element op een gespecificeerde plaats invoegt
methode insertAdjacentHTML,
die tags op een gespecificeerde plaats invoegt