Phương thức append

Phương thức append cho phép chèn một phần tử khác vào cuối một phần tử bất kỳ. Tham số của phương thức nhận một phần tử, thường được tạo thông qua createElement, hoặc một chuỗi. Có thể thêm nhiều phần tử hoặc chuỗi cùng một lúc, liệt kê chúng cách nhau bởi dấu phẩy.

Cú pháp

phần tử cha.append(phần tử hoặc chuỗi);

Ví dụ

Hãy tạo một đoạn văn, đặt văn bản cho nó và đặt vào trang web ở cuối khối #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);

Kết quả thực thi mã:

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

Ví dụ

Hãy đặt nhiều đoạn văn cùng một lúc vào cuối khối #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);

Kết quả thực thi mã:

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

Ví dụ

Hãy sử dụng một chuỗi làm tham số cho phương thức:

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

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

Kết quả thực thi mã:

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

Ví dụ

Cho trước một ul. Hãy đặt trong nó 9 thẻ li, đồng thời làm cho văn bản của chúng là số thứ tự:

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

Kết quả thực thi mã:

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

Ví dụ

Hãy điền vào bảng với các tr và td:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tạo một tr
	
	// Điền vào tr với các td:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // tạo một td
		td.textContent = j; // viết văn bản vào nó
		
		tr.append(td); // thêm td đã tạo vào cuối tr
	}
	
	table.append(tr); // thêm tr đã tạo vào cuối bảng
}

Kết quả thực thi mã:

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

Xem thêm

phương thức prepend,
chèn các phần tử vào đầu
phương thức appendChild,
chèn các phần tử vào cuối
phương thức insertBefore,
chèn phần tử vào trước một phần tử
phương thức insertAdjacentElement,
chèn phần tử vào vị trí chỉ định
phương thức insertAdjacentHTML,
chèn các thẻ vào vị trí chỉ định