Metóda append

Metóda append umožňuje vložiť na koniec nejakého prvku iný prvok. Parametrom metódy je prvok, zvyčajne vytvorený cez createElement, alebo reťazec. Je možné pridať naraz viacero prvkov alebo reťazcov, uvedením ich oddelených čiarkou.

Syntax

rodič.append(prvok alebo reťazec);

Príklad

Vytvorme odsek, nastavme mu text a umiestnime ho 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.append(p);

Výsledok vykonania kódu:

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

Príklad

Umiestnime naraz niekoľko odsekov na koniec 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ýsledok vykonania kódu:

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

Príklad

Použime ako parameter metódy reťazec:

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

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

Výsledok vykonania kódu:

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

Príklad

Daný je ul. Umiestnime do neho 9 elementov 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.append(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 table = document.querySelector('#table');

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // vytvoríme tr-ku
	
	// Naplníme tr-ku td-kami:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // vytvoríme td-ku
		td.textContent = j; // napíšeme do nej text
		
		tr.append(td); // pridáme vytvorenú td-ku na koniec tr-ky
	}
	
	table.append(tr); // pridáme 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 prepend,
ktorá vkladá prvky na začiatok
metóda appendChild,
ktorá vkladá prvky na koniec
metóda insertBefore,
ktorá vkladá prvok pred daný prvok
metóda insertAdjacentElement,
ktorá vkladá prvok na určené miesto
metóda insertAdjacentHTML,
ktorá vkladá značky na určené miesto