Append әдісі

append әдісі кез келген элементтің соңына басқа элементті салуға мүмкіндік береді. Әдіс параметр ретінде әдетте createElement арқылы жасалған элементті немесе жолды қабылдайды. Бірнеше элементтерді немесе жолдарды бірден қосуға болады, оларды үтір арқылы атап өту керек.

Синтаксис

ата.append(элемент немесе жол);

Мысал

Абзац жасап, оған мәтін берейік және оны бетке #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);

Кодты орындау нәтижесі:

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

Мысал

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

Кодты орындау нәтижесі:

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

Мысал

Әдіс параметрі ретінде жолды қолданайық:

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

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

Кодты орындау нәтижесі:

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

Мысал

ul берілген. Оның ішіне 9 li тегін орналастырайық, олардың мәтінін реттік нөмірлер етейік:

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

Кодты орындау нәтижесі:

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

Мысал

Кестені tr-лармен және td-лармен толтырайық:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr жасаймыз
	
	// tr-ны td-лармен толтырамыз:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td жасаймыз
		td.textContent = j; // оған мәтін жазамыз
		
		tr.append(td); // жасалған td-ны tr-ның соңына қосамыз
	}
	
	table.append(tr); // жасалған tr-ны кестенің соңына қосамыз
}

Кодты орындау нәтижесі:

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

Сондай-ақ қараңыз

prepend әдісі,
элементтерді басына салады
appendChild әдісі,
элементтерді соңына салады
insertBefore әдісі,
элементті элементтің алдына салады
insertAdjacentElement әдісі,
элементті көрсетілген орынға салады
insertAdjacentHTML әдісі,
тегтерді көрсетілген орынға салады