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

javascriptphầ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ó:

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

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

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

html<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:

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

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

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

html<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:

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

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

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

html<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:

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

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

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

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

Xem thêm