Meetod append

Meetod append võimaldab lisada mõne elemendi lõppu teise elemendi. Parameetrina võtab meetod elemendi, tavaliselt loodud läbi createElement, või stringi. Saab lisada korraga mitu elementi või stringe, loetledes need komadega.

Süntaks

vanem.append(element või string);

Näide

Loome lõigu, määrame sellele teksti ja asetame lehele ploki #parent lõppu:

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

Koodi täitmise tulemus:

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

Näide

Asetame korraga mitu lõiku ploki #parent lõppu:

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

Koodi täitmise tulemus:

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

Näide

Kasutame meetodi parameetrina stringi:

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

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

Koodi täitmise tulemus:

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

Näide

Antud on ul. Asetame sinna 9 li elementi, muutes nende tekstiks järjekorranumbrid:

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

Koodi täitmise tulemus:

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

Näide

Täidame tabeli tr-idega ja td-dega:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // loome tr-i
	
	// Täidame tr-i td-dega:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // loome td
		td.textContent = j; // kirjutame sellesse teksti
		
		tr.append(td); // lisame loodud td tr-i lõppu
	}
	
	table.append(tr); // lisame loodud tr-i tabeli lõppu
}

Koodi täitmise tulemus:

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

Vaata ka

meetod prepend,
mis lisab elemendid algusesse
meetod appendChild,
mis lisab elemendid lõppu
meetod insertBefore,
mis lisab elemendi enne elementi
meetod insertAdjacentElement,
mis lisab elemendi etteantud kohta
meetod insertAdjacentHTML,
mis lisab siltide etteantud kohta