Phương thức insertAdjacentElement
Phương thức insertAdjacentElement cho phép
chèn một phần tử vào bất kỳ vị trí nào trên trang.
Thường được sử dụng nhất sau khi tạo phần tử
bằng createElement.
Mã đượ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.insertAdjacentElement(phương thức chèn, mã để 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 đoạn văn mới trước nó:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Kết quả thực thi mã:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Ví dụ . Phương thức afterEnd
Và 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Kết quả thực thi mã:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Ví dụ . Phương thức afterBegin
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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Kết quả thực thi mã:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Ví dụ . Phương thức beforeEnd
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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Kết quả thực thi mã:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Xem thêm
-
phương thức
insertAdjacentHTML,
chèn các thẻ vào vị trí chỉ định -
phương thức
insertAdjacentText,
chèn văn bản vào vị trí 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ử
