Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

2 Parameter Method replaceChild() DOM pada HTML
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].

Sintak:
parentNode.replaceChild( newChild, oldChild )

Parameter Values: method ini menerima dua parameter seperti diperlihatkan sebagai berikut.
  • 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:

Contoh: mengilustrasikan teks <li> pertama yang diganti dengan teks baru.

<!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

Artikel ini didedikasikan kepada: Metha Prasetiana, Muchamad Bima Purnama, Muchamad Tegar Suseno, Muhamad Bayu Irawan, dan Muhammad Farhanudin.

5 komentar untuk "Mengganti Node Child HTML Menggunakan replaceChild DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method replaceChild() DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan method replaceChild() DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa fungsi dari method replaceChild() dom pada html?

    BalasHapus
    Balasan
    1. Method replaceChild() berfungsi untuk menggantikan nilai node child dalam node induk yang telah diberikan sebelumnya.

      Hapus
    2. Method replaceChild dari suatu elemen Node berfungsi untuk menggantikan nilai node child dalam node induk yang telah diberikan sebelumnya.

      Catatan: 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).

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -