Append metodu

append metodu bir elementin sonuna başqa bir element əlavə etməyə imkan verir. Metod parametr kimi adətən createElement vasitəsilə yaradılan elementi və ya sətri qəbul edir. Birdən çox elementi və ya sətri vergüllə ayıraraq bir anda əlavə etmək olar.

Sintaksis

valideyn.append(element və ya sətir);

Nümunə

Gəlin bir abzas yaradaq, ona mətn təyin edək və səhifədə #parent blokunun sonuna yerləşdirək:

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

Kodun icrasının nəticəsi:

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

Nümunə

Gəlin birdən çox abzası bir anda #parent blokunun sonuna yerləşdirək:

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

Kodun icrasının nəticəsi:

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

Nümunə

Gəlin metodun parametri kimi sətirdən istifadə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə

ul verilib. Gəlin onun içinə 9 ədəd li teqini yerləşdirək, onların mətninə isə sıra nömrələrini yazaq:

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

Kodun icrasının nəticəsi:

<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ümunə

Gəlin cədvəli tr-lər və td-lər ilə dolduraq:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr yaradırıq
	
	// Tr-ni td-lər ilə doldururuq:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td yaradırıq
		td.textContent = j; // ona mətn yazırıq
		
		tr.append(td); // yaradılmış td-ni tr-nin sonuna əlavə edirik
	}
	
	table.append(tr); // yaradılmış tr-ni cədvəlin sonuna əlavə edirik
}

Kodun icrasının nəticəsi:

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

Həmçinin bax

prepend metodu,
elementləri əvvələ əlavə edir
appendChild metodu,
elementləri sona əlavə edir
insertBefore metodu,
elementi elementdən əvvələ əlavə edir
insertAdjacentElement metodu,
elementi təyin olunmuş yerə əlavə edir
insertAdjacentHTML metodu,
teqləri təyin olunmuş yerə əlavə edir