Mengganti Node Child HTML Menggunakan replaceChild DOM
Method replaceChild() DOM pada HTML digunakan untuk menghasilkan child node dengan node baru bersamaan dengan parent node yang diberikan sebelumnya.
Sintak:
parentNode.replaceChild( newChild, oldChild )
Parameter Values: method ini menerima dua parameter seperti diperlihatkan sebagai berikut.
Return Value: berfungsi untuk mengembalikan sebuah node object yang merepresentasikan node yang diganti.
Contoh: mengilustrasikan teks <li> pertama yang diganti dengan teks baru.
 |
| Ilustrasi replaceChild DOM HTML |
Sebelum memahami lebih dalam materi tentang Mengganti Node Child HTML Menggunakan replaceChild DOM, terlebih dahulu pelajari materi tentang: Menghapus Node Child HTML Menggunakan removeChild DOM [klik], Menghapus Node Atribut HTML removeAttributeNode DOM [klik], dan Menghapus Atribut HTML Menggunakan removeAttribute DOM [klik].
parentNode.replaceChild( newChild, oldChild )
- newChild: Merupakan parameter yang diperlukan dan mewakili node yang perlu dimasukkan.
- oldChild: Merupakan parameter yang diberlukan dan mewakili node yang perlu diganti.
Return Value: berfungsi untuk mengembalikan sebuah node object yang merepresentasikan node yang diganti.
Baca Juga:
<!DOCTYPE html>
<html>
<head>
<title>
Method replaceChild() DOM
</title>
</head>
<body>
<h1 style="color: green;">
Blog Elfan
</h1>
<h2>
Method replaceChild() DOM
</h2>
<p>Sorting Algorithm</p>
<ul id = "listitem">
<li>Insertion sort</li>
<li>Merge sort</li>
<li>Bubble sort</li>
</ul>
<button onclick ="Bonsss()">
Klik Disini!
</button>
<script>
function Bonsss()
{
var doc = document.createTextNode("Quick sort");
var list = document.getElementById("listitem").childNodes[0];
list.replaceChild(doc, list.childNodes[0]);
}
</script>
</body>
</html>
Output:
Blog Elfan
Method replaceChild() DOM
Sorting Algorithm
- Insertion sort
- Merge sort
- Bubble sort
Referensi Tambahan:
- Cara Penggunaan Method setAttributeNode() DOM pada HTML [klik]
- Cara Penggunaan Properti tagName DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti textContent DOM pada HTML [klik]
- 7 Nilai dari Properti Koordinat Geolokasi DOM pada HTML [klik]
- 2 Nilai Return Properti Geolokasi Posisi DOM pada HTML [klik]
- Cara Penggunaan Method History.back() DOM pada HTML [klik]
- Cara Penggunaan Method History.forward() DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Metha Prasetiana, Muchamad Bima Purnama, Muchamad Tegar Suseno, Muhamad Bayu Irawan, dan Muhammad Farhanudin.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method replaceChild() DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan method replaceChild() DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa fungsi dari method replaceChild() dom pada html?
BalasHapusMethod replaceChild() berfungsi untuk menggantikan nilai node child dalam node induk yang telah diberikan sebelumnya.
HapusMethod replaceChild dari suatu elemen Node berfungsi untuk menggantikan nilai node child dalam node induk yang telah diberikan sebelumnya.
HapusCatatan: Jika node baru sudah ada pada tempat atau lokasi lain di DOM, maka nilai tersebut akan dihapus terlebih dahulu dari posisi yang telah ditempati sebelumnya, dan digantikan ke posisi yang baru (replace).