Phương thức prepend

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

Cú pháp

phần tử cha.prepend(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 ở đầu 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.prepend(p);

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

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

Ví dụ

Hãy đặt nhiều đoạn văn ngay lập tức vào đầu 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.prepend(p1, p2);

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

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

Ví dụ

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

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

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

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

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

Xem thêm

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