Phương thức insertAdjacentHTML

Phương thức insertAdjacentHTML cho phép chèn một chuỗi mã HTML vào bất kỳ vị trí nào trên trang. Mã được chèn tương đối với phần tử mốc. Có thể thực hiện chèn trước phần tử mốc (phương thức chèn 'beforeBegin'), sau nó (phương thức chèn 'afterEnd'), cũng như vào đầu (phương thức chèn 'afterBegin') hoặc vào cuối (phương thức chèn 'beforeEnd') phần tử mốc.

Cú pháp

phần tử mốc.insertAdjacentHTML(phương thức chèn, mã để chèn);

Ví dụ . Phương thức beforeBegin

Giả sử phần tử mốc là phần tử #target. Hãy chèn một đoạn văn mới trước nó:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

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

<p>!</p>
<div id="target">
	<p>elem</p>
</div>

Ví dụ . Phương thức afterEnd

Bây giờ hãy chèn một đoạn văn mới sau phần tử mốc:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

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

<div id="target">
	<p>elem</p>
</div>
<p>!</p>

Ví dụ . Phương thức afterBegin

Hãy chèn một đoạn văn mới vào đầu phần tử mốc:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

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

<div id="target">
	<p>!</p>
	<p>elem</p>
</div>

Ví dụ . Phương thức beforeEnd

Hãy chèn một đoạn văn mới vào cuối phần tử mốc:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

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

<div id="target">
	<p>elem</p>
	<p>!</p>
</div>

Xem thêm

phương thức insertAdjacentText,
chèn văn bản vào vị trí đã định
phương thức insertAdjacentElement,
chèn phần tử vào vị trí đã định
phương thức prepend,
chèn các phần tử vào đầu
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ần tử cha
phương thức insertBefore,
chèn các phần tử trước một phần tử