Append metodas

Metodas append leidžia įterpti į kito elemento galą kitą elementą. Kaip parametrą metodas priima elementą, paprastai sukurtą per createElement, arba eilutę. Galima pridėti iš karto kelis elementus ar eilutes, išvardijant juos per kablelį.

Sintaksė

tėvinis.append(elementas ar eilutė);

Pavyzdys

Sukurkime pastraipą, nustatykime jai tekstą ir patalpinkime puslapyje į bloko #parent galą:

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

Kodo vykdymo rezultatas:

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

Pavyzdys

Patalpinkime iš karto kelias pastraipas į bloko #parent galą:

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

Kodo vykdymo rezultatas:

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

Pavyzdys

Panaudokime kaip metodo parametrą eilutę:

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

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

Kodo vykdymo rezultatas:

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

Pavyzdys

Duotas ul. Patalkime jame 9 li žymes, o jų tekstu padarykime eilinius numerius:

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

Kodo vykdymo rezultatas:

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

Pavyzdys

Užpildykime lentelę tr-ėmis ir td-ėmis:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // sukuriam tr-ę
	
	// Užpildome tr-ę td-ėmis:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // sukuriam td-ę
		td.textContent = j; // įrašome į ją tekstą
		
		tr.append(td); // pridedame sukurtą td-ę į tr-ės galą
	}
	
	table.append(tr); // pridedame sukurtą tr-ę į lentelės galą
}

Kodo vykdymo rezultatas:

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

Taip pat žiūrėkite

metodas prepend,
kuris įterpia elementus į pradžią
metodas appendChild,
kuris įterpia elementus į galą
metodas insertBefore,
kuris įterpia elementą prieš elementą
metodas insertAdjacentElement,
kuris įterpia elementą į nurodytą vietą
metodas insertAdjacentHTML,
kuris įterpia žymes į nurodytą vietą