Memasukkan Elemen Spesifik HTML insertAdjacentElement DOM
Method insertAdjacentElement() DOM pada HTML berfungsi untuk memasukkan elemen spesifik pada posisik yang spesifik. Nilai resmi untuk posisi yang ditentukan pada method insertAdjacentElement() adalah afterbegin, afterend, beforebegin, dan beforeend.
position: sebuah posisi relatif menuju ke elemen.
Sintak:
node.insertAdjacentElement(position, element)
Parameter: method ini membutuhkan 2 jenis parameter dalam penggunaannya.
Elemen: nilai elemen yang ingin dilakukan insert.
Return Values: elemen yang telah dilakukan insert akan mengembalikan nilai return, ataupun nilai null, jika proses insert gagal.
Exceptions: jika nilai posisi spesifik tidak dikenali, atau elemen spesifik adalah elemen yang bernilai tidak valid.
Contoh:
 |
| Ilustrasi insertAdjacentElement DOM HTML |
Sebelum memahami lebih dalam materi tentang Memasukkan Elemen Spesifik HTML insertAdjacentElement DOM, terlebih dahulu pelajari materi tentang: Mengatur Konten Teks HTML Menggunakan innerText DOM [klik], Mendapatkan Konten HTML Menggunakan innerHTML DOM [klik], dan Mendapatkan Nilai ID HTML Menggunakan ID DOM [klik].
- afterbegin: hanya di dalam elemen saja, sebelum posisi child pertama.
- afterend: setelah elemen itu sendiri.
- beforebegin: sebelum elemen itu sendiri.
- beforeend: hanya di dalam elemen saja, setelah posisi child terakhir.
Sintak:
node.insertAdjacentElement(position, element)
Parameter: method ini membutuhkan 2 jenis parameter dalam penggunaannya.
Return Values: elemen yang telah dilakukan insert akan mengembalikan nilai return, ataupun nilai null, jika proses insert gagal.
Baca Juga:
Exceptions: jika nilai posisi spesifik tidak dikenali, atau elemen spesifik adalah elemen yang bernilai tidak valid.
<!DOCTYPE html>
<html>
<head>
<!-- script untuk proses
insert elemen spesifik ke
posisi spesifik. -->
<script>
function insadjele()
{
var s = document.getElementById("d1");
var h = document.getElementById("head3");
h.insertAdjacentElement("afterend", s);
}
</script>
</head>
<body>
<h1>
Blog Elfan
</h1>
<div id="d1">
div element
</div>
<h3 id="head3">
header element
</h3>
<p>
Klik tombol untuk melakukan
insert elemen div setelah
elemen header.
</p>
<button
onclick="insadjele()">
Insert element
</button>
</body>
</html>
Output:
Blog Elfan
div element
header element
Klik tombol untuk melakukan insert elemen div setelah elemen header.
Referensi Tambahan:
- Cara Penggunaan Method isDefaultNamespace() DOM pada HTML [klik]
- Cara Penggunaan Method isEqualNode() DOM pada HTML [klik]
- 2 Nilai Parameter pada Method isSameNode() DOM pada HTML [klik]
- Cara Penggunaan Method isSupported() DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti Lang DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti lastChild DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti lastElementChild DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Intan Kurnia Putri, Intan Nurhayati, Ishana Sanjaya Wardhani, Ivanka Bimo Al-Machzumi W, dan Jaya'Ul Nur Azizah.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method insertAdjacentElement() DOM pada HTML?
BalasHapusBerikut adalah bebera jenis browser populer yang dapat digunakan untuk mengaktifkan method insertAdjacentElement() DOM pada HTML:
Hapus1. Google Chrome
2. Firefox
3. Opera
4. Internet Explorer
5. Safari
Apa fungsi method insertAdjacentElement() DOM pada HTML?
BalasHapusMethod insertAdjacentElement() digunakan untuk menyisipkan elemen tertentu ke posisi tertentu.
HapusMethod insertAdjacentElement() DOM pada HTML merupakan antar muka elemen yang digunakan untuk menyisipkan node elemen tertentu pada posisi relatif tertentu terhadap elemen yang dipanggilnya.
Hapus