Методи 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,
ки тегҳоро ба ҷои додашуда ҷойгир мекунад