De append methode

De methode append maakt het mogelijk om aan het einde van een element een ander element in te voegen. Als parameter accepteert de methode een element, meestal gemaakt via createElement, of een string. Het is mogelijk om meerdere elementen of strings tegelijk toe te voegen, door ze gescheiden door komma's op te sommen.

Syntaxis

ouder.append(element of string);

Voorbeeld

Laten we een alinea maken, er tekst instellen en deze aan het einde van het blok #parent op de pagina plaatsen:

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

Resultaat van de code:

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

Voorbeeld

Laten we meerdere alinea's tegelijk aan het einde van het blok #parent plaatsen:

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

Resultaat van de code:

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

Voorbeeld

Laten we een string gebruiken als parameter voor de methode:

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

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

Resultaat van de code:

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

Voorbeeld

Er is 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.append(li);
}

Resultaat van de 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 table = document.querySelector('#table');

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // maak een tr
	
	// Vul de tr met td's:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // maak een td
		td.textContent = j; // schrijf er tekst in
		
		tr.append(td); // voeg de gemaakte td toe aan het einde van de tr
	}
	
	table.append(tr); // voeg de gemaakte tr toe aan het einde van de tabel
}

Resultaat van de 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

de methode prepend,
die elementen aan het begin invoegt
de methode appendChild,
die elementen aan het einde invoegt
de methode insertBefore,
die een element invoegt vóór een element
de methode insertAdjacentElement,
die een element op een opgegeven plaats invoegt
de methode insertAdjacentHTML,
die tags op een opgegeven plaats invoegt