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 მეთოდი,
რომელიც ტეგებს ჩასვამს მითითებულ ადგილას