appendChild-metode

Die metode appendChild laat toe om 'n ander element aan die einde in te voeg. Meestal word dit gebruik na die skep van 'n element met createElement.

Sintaksis

ouer.appendChild(element);

Voorbeeld

Kom ons skep 'n paragraaf, stel die teks daarvoor in en plaas dit op die bladsy aan die einde van die 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 die kode:

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

Voorbeeld

Daar is gegee ul. Kom ons plaas 9 li-tags daarin, en maak hulle teks die volgordelike nommers:

<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 die kode:

<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

Kom ons vul die tabel met tr-reëls en td-selle:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // skep 'n tr-reël
	
	// Vul die tr-reël met td-selle:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // skep 'n td-sel
		td.textContent = j; // skryf teks daarin
		
		tr.appendChild(td); // voeg die geskepte td-sel aan die einde van die tr-reël toe
	}
	
	table.appendChild(tr); // voeg die geskepte tr-reël aan die einde van die tabel toe
}

Resultaat van die kode:

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

Kyk ook

metode append,
wat elemente aan die einde invoeg
metode insertBefore,
wat 'n element voor 'n ander element invoeg
metode insertAdjacentElement,
wat 'n element op 'n gespesifiseerde plek invoeg
metode insertAdjacentHTML,
wat tags op 'n gespesifiseerde plek invoeg