Metode insertAdjacentElement
Metode insertAdjacentElement memungkinkan
penyisipan elemen di mana saja pada halaman.
Paling sering digunakan setelah pembuatan elemen
dengan createElement.
Kode disisipkan relatif terhadap elemen
acuan. Dapat dilakukan penyisipan sebelum
elemen acuan (metode penyisipan beforeBegin),
setelahnya (metode penyisipan afterEnd),
maupun di awal (metode penyisipan afterBegin)
atau di akhir (metode penyisipan beforeEnd)
elemen acuan.
Sintaks
elemen acuan.insertAdjacentElement(metode penyisipan, kode untuk disisipkan);
Contoh . Metode beforeBegin
Misalkan elemen acuan adalah elemen #target.
Sisipkan paragraf baru di depannya:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Hasil eksekusi kode:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Contoh . Metode afterEnd
Sekarang sisipkan paragraf baru setelah elemen acuan:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Hasil eksekusi kode:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Contoh . Metode afterBegin
Sisipkan paragraf baru di awal elemen acuan:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Hasil eksekusi kode:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Contoh . Metode beforeEnd
Sisipkan paragraf baru di akhir elemen acuan:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Hasil eksekusi kode:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Lihat juga
-
metode
insertAdjacentHTML,
yang menyisipkan tag di tempat yang ditentukan -
metode
insertAdjacentText,
yang menyisipkan teks di tempat yang ditentukan -
metode
prepend,
yang menyisipkan elemen di awal -
metode
append,
yang menyisipkan elemen di akhir -
metode
appendChild,
yang menyisipkan elemen di akhir induk -
metode
insertBefore,
yang menyisipkan elemen sebelum elemen
