Metoda append

Metoda append umożliwia wstawienie na koniec danego elementu innego elementu. Jako parametr metoda przyjmuje element, zazwyczaj utworzony za pomocą createElement, lub ciąg znaków. Można dodać od razu kilka elementów lub ciągów, wymieniając je przez przecinek.

Składnia

rodzic.append(element lub ciąg znaków);

Przykład

Stwórzmy akapit, ustawmy mu tekst i umieśćmy na stronie na końcu 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);

Wynik wykonania kodu:

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

Przykład

Umieśćmy od razu kilka akapitów na końcu 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);

Wynik wykonania kodu:

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

Przykład

Użyjmy jako parametru metody ciągu znaków:

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

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

Wynik wykonania kodu:

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

Przykład

Dany jest ul. Umieśćmy w nim 9 tagów li, przy czym ich tekstem uczyńmy numery porządkowe:

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

Wynik wykonania kodu:

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

Przykład

Wypełnijmy tabelę tr-kami i td-kami:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tworzymy tr-kę
	
	// Wypełniamy tr-kę td-kami:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // tworzymy td-kę
		td.textContent = j; // piszemy w niej tekst
		
		tr.append(td); // dodajemy utworzoną td-kę na koniec tr-ki
	}
	
	table.append(tr); // dodajemy utworzoną tr-kę na koniec tabeli
}

Wynik wykonania kodu:

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

Zobacz też

metoda prepend,
która wstawia elementy na początek
metoda appendChild,
która wstawia elementy na koniec
metoda insertBefore,
która wstawia element przed elementem
metoda insertAdjacentElement,
która wstawia element w określone miejsce
metoda insertAdjacentHTML,
która wstawia tagi w określone miejsce