Metoda append

Metoda append umožňuje vložit na konec nějakého elementu jiný element. Jako parametr přijímá element, obvykle vytvořený pomocí createElement, nebo řetězec. Je možné přidat několik elementů nebo řetězců najednou, stačí je vyjmenovat oddělené čárkou.

Syntaxe

rodič.append(prvek nebo řetězec);

Příklad

Vytvořme odstavec, nastavme mu text a umístěme jej 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.append(p);

Výsledek provedení kódu:

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

Příklad

Vložme několik odstavců najednou na konec bloku #parent:

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

Výsledek provedení kódu:

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

Příklad

Použijme jako parametr metody řetězec:

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

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

Výsledek provedení kódu:

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

Příklad

Je dán ul. Umístěme do něj 9 tagů li, přičemž jejich textem budou 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.append(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 table = document.querySelector('#table');

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // vytvoříme tr-ku
	
	// Naplníme tr-ku td-čkami:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // vytvoříme td-čku
		td.textContent = j; // napíšeme do ní text
		
		tr.append(td); // přidáme vytvořenou td-čku na konec tr-ky
	}
	
	table.append(tr); // přidá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 prepend,
která vkládá elementy na začátek
metoda appendChild,
která vkládá elementy na konec
metoda insertBefore,
která vkládá element před element
metoda insertAdjacentElement,
která vkládá element na zadané místo
metoda insertAdjacentHTML,
která vkládá tagy na zadané místo