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ử