Kaedah insertAdjacentElement
Kaedah insertAdjacentElement membolehkan
anda memasukkan elemen di mana-mana tempat pada halaman.
Selalunya digunakan selepas mencipta elemen
dengan createElement.
Kod dimasukkan relatif kepada elemen
rujukan. Anda boleh membuat pemasukan sebelum
elemen rujukan (kaedah pemasukan beforeBegin),
selepasnya (kaedah pemasukan afterEnd),
dan juga pada permulaan (kaedah pemasukan afterBegin)
atau pada akhir (kaedah pemasukan beforeEnd)
elemen rujukan.
Sintaks
elemen rujukan.insertAdjacentElement(kaedah pemasukan, kod untuk dimasukkan);
Contoh . Kaedah beforeBegin
Katakan elemen rujukan ialah elemen #target.
Mari masukkan perenggan baru sebelum elemen tersebut:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Hasil pelaksanaan kod:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Contoh . Kaedah afterEnd
Sekarang mari masukkan perenggan baru selepas elemen rujukan:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Hasil pelaksanaan kod:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Contoh . Kaedah afterBegin
Mari masukkan perenggan baru pada permulaan elemen rujukan:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Hasil pelaksanaan kod:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Contoh . Kaedah beforeEnd
Mari masukkan perenggan baru pada akhir elemen rujukan:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Hasil pelaksanaan kod:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Lihat juga
-
kaedah
insertAdjacentHTML,
yang memasukkan teg di tempat yang ditentukan -
kaedah
insertAdjacentText,
yang memasukkan teks di tempat yang ditentukan -
kaedah
prepend,
yang memasukkan elemen pada permulaan -
kaedah
append,
yang memasukkan elemen pada akhir -
kaedah
appendChild,
yang memasukkan elemen pada akhir induk -
kaedah
insertBefore,
yang memasukkan elemen sebelum elemen
