Phương thức insertBefore

Phương thức insertBefore cho phép chèn phần tử trước một phần tử khác. Thường được sử dụng sau khi tạo phần tử bằng phương thức createElement. Phương thức được áp dụng cho phần tử cha của phần tử mà trước nó sẽ diễn ra việc chèn.

Cú pháp

cha.insertBefore(phần tử, chèn trước phần tử nào);

Ví dụ

Hãy tạo một đoạn văn và đặt nó trước đoạn văn thứ hai:

<div id="parent">
	<p>phần tử 1</p>
	<p id="before">phần tử 2</p>
	<p>phần tử 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

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

<div id="parent">
	<p>phần tử 1</p>
	<p>!</p>
	<p>phần tử 2</p>
	<p>phần tử 3</p>
</div>

Ví dụ

Thêm một đoạn văn vào đầu phần tử #parent. Để làm điều này, chúng ta chèn đoạn văn của mình trước phần tử con đầu tiên của #parent. Phần tử con này có thể được tìm thấy bằng firstElementChild:

<div id="parent">
	<p>phần tử 1</p>
	<p>phần tử 2</p>
</div>

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

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

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

<div id="parent">
	<p>!</p>
	<p>phần tử 1</p>
	<p>phần tử 2</p>
</div>

Ví dụ

Khi truyền tham số thứ hai là null, phương thức insertBefore hoạt động như appendChild. Đồng thời, nếu phần tử không có phần tử con, firstElementChild trả về null. Do đó, có thể thêm vào đầu phần tử ngay cả khi nó không có phần tử con:

<div id="parent"></div>

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

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

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

<div id="parent">
	<p>!</p>
</div>

Xem thêm

phương thức prepend,
chèn phần tử vào đầu
phương thức appendChild,
chèn phần tử vào cuối phần tử cha
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