Phương thức insertAdjacentText

Phương thức insertAdjacentText cho phép chèn một chuỗi vào bất kỳ vị trí nào trên trang. Chuỗi được chèn tương đối với phần tử tham chiếu. Có thể thực hiện chèn trước phần tử tham chiếu (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ử tham chiếu.

Cú pháp

javascriptphần tử tham chiếu.insertAdjacentText(phương thức chèn, văn bản cần chèn);

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

Giả sử phần tử tham chiếu là phần tử #target. Hãy chèn một văn bản nào đó trước nó:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');

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

htmltext
<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ử tham chiếu:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');

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

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

Ví dụ . afterBegin

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');

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

html<div id="target">
  text
  <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ử tham chiếu:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');

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

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

Xem thêm