Metoda append

Metoda append omogoča vstavljanje drugega elementa na konec katerega koli elementa. Kot parameter metoda sprejme element, običajno ustvarjen z createElement, ali niz. Možno je dodati več elementov ali nizov hkrati, tako da jih naštejemo ločene z vejico.

Sintaksa

starš.append(element ali niz);

Primer

Ustvarimo odstavek, mu nastavimo besedilo in ga postavimo na stran na konec bloka #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);

Rezultat izvajanja kode:

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

Primer

Postavimo več odstavkov hkrati na konec bloka #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);

Rezultat izvajanja kode:

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

Primer

Uporabimo niz kot parameter metode:

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

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

Rezultat izvajanja kode:

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

Primer

Podan je ul. Postavimo vanj 9 oznak li, pri čemer naj bodo njihova besedila zaporedne številke:

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

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

Primer

Izpolnimo tabelo z tr in td:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // ustvarimo tr
	
	// Izpolnimo tr z td:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // ustvarimo td
		td.textContent = j; // vanjo vpišemo besedilo
		
		tr.append(td); // dodamo ustvarjen td na konec tr
	}
	
	table.append(tr); // dodamo ustvarjeno tr na konec tabele
}

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

Glejte tudi

metoda prepend,
ki vstavi elemente na začetek
metoda appendChild,
ki vstavi elemente na konec
metoda insertBefore,
ki vstavi element pred element
metoda insertAdjacentElement,
ki vstavi element na določeno mesto
metoda insertAdjacentHTML,
ki vstavi oznake na določeno mesto