Metóda appendChild

Metóda appendChild umožňuje vložiť na koniec nejakého iného prvku. Najčastejšie sa používa po vytvorení prvku pomocou createElement.

Syntax

rodič.appendChild(prvok);

Príklad

Vytvorme odsek, nastavme mu text a umiestnime na stránku na koniec bloku #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);

Výsledok vykonania kódu:

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

Príklad

Daný ul. Umiestnime do neho 9 tagov li, pričom ich textom urobme poradové čísla:

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

Výsledok vykonania kódu:

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

Príklad

Vyplňme tabuľku tr-kami a tdčkami:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // vytvárame tr-ku
	
	// Vyplňame tr-ku tdčkami:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // vytvárame tdčku
		td.textContent = j; // píšeme do nej text
		
		tr.appendChild(td); // pridávame vytvorenú tdčku na koniec tr-ky
	}
	
	table.appendChild(tr); // pridávame vytvorenú tr-ku na koniec tabuľky
}

Výsledok vykonania kódu:

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

Pozrite tiež

metóda append,
ktorá vkladá prvky na koniec
metóda insertBefore,
ktorá vkladá prvok pred prvok
metóda insertAdjacentElement,
ktorá vkladá prvok na zadané miesto
metóda insertAdjacentHTML,
ktorá vkladá tagy na zadané miesto