Phương thức appendChild

Phương thức appendChild cho phép chèn một phần tử khác vào cuối một phần tử nào đó. Thường được sử dụng nhất sau khi tạo phần tử bằng createElement.

Cú pháp

phần tử cha.appendChild(phần tử);

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.appendChild(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ụ

Cho một ul. Hãy đặt trong nó 9 thẻ li, đồng thời đặt 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.appendChild(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 bảng với các tr và các 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 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; // ghi văn bản vào nó
		
		tr.appendChild(td); // thêm td đã tạo vào cuối tr
	}
	
	table.appendChild(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 append,
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