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
phầ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ó:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');
Kết quả thực thi mã:
text
<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:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');
Kết quả thực thi mã:
<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:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');
Kết quả thực thi mã:
<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:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');
Kết quả thực thi mã:
<div id="target">
<p>elem</p>
text
</div>
Xem thêm
-
phương thức
insertAdjacentElement,
chèn một phần tử vào vị trí được chỉ định -
phương thức
insertAdjacentHTML,
chèn mã vào vị trí được chỉ đị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ử
