Metoda appendChild

Metoda appendChild umožňuje vložit na konec nějakého elementu jiný element. Nejčastěji se používá po vytvoření elementu pomocí createElement.

Syntaxe

rodič.appendChild(prvek);

Příklad

Vytvořme odstavec, nastavme mu text a umístěme na stránku na konec 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ýsledek provedení kódu:

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

Příklad

Je dán ul. Umístěme do něj 9 tagů li, přičemž jejich textem udělejme pořadová čí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ýsledek provedení 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>

Příklad

Vyplňme tabulku 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áříme tr-ku
	
	// Naplňme tr-ku td-čkami:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // vytváříme td-čku
		td.textContent = j; // píšeme do ní text
		
		tr.appendChild(td); // přidáváme vytvořenou td-čku na konec tr-ky
	}
	
	table.appendChild(tr); // přidáváme vytvořenou tr-ku na konec tabulky
}

Výsledek provedení 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>

Viz také

metoda append,
která vkládá elementy na konec
metoda insertBefore,
která vkládá prvek před prvek
metoda insertAdjacentElement,
která vkládá prvek na zadané místo
metoda insertAdjacentHTML,
která vkládá tagy na zadané místo