2 Contoh Penggunaan Method appendChild() DOM pada HTML

Pada artikel ini, akan dipelajari tentang method appendChild() pada Javascript DOM HTML, beserta pemahaman implementasinya pada contoh program.

Method appendChild() dari node interface, digunakan untuk menciptakan node teks sebagai child terakhir dari node. Method ini juga digunakan untuk menggerakkan elemen dari satu elemen ke elemen lainnya, yang digunakan untuk menciptakan elemen baru dengan beberapa teks, dimana teks pertama yang dibuat digunakan sebagai teks node dan dilakukan append pada elemen tersebut, dan kemudian append ke dokumen itu sendiri.

Sintak:
node.appendChild(node);

Parameter: method ini menerima parameter node tunggal yang sifatnya wajib dan digunakan untuk menentukan node object yang akan dilakukan append.

Method document.createElement() digunakan untuk menciptakan elemen html, dengan elemen spesifik dengan mana elementName yang akan diciptakan atau yang akan dinamai sebagai elemen, jika elemen spesifik tidak dikenali. Juga dapat diciptakan method createTextNode() untuk menciptakan TextNode yang mengandung node elemen dan node teks. Method ini digunakan untuk menyediakan teks ke elemen yang akan mengandung nilai teks sebagai nilai parameter dan juga merupakan tipe string. Method getElementById() akan mengembalikan elemen yang mengandung ID yang telah diberikan sebelumnya yang akan dilewatkan ke fungsinya.

Contoh: mendeskripsikan kegunaan dari method appendChild() yang akan menciptakan node teks sebagai nilai child terakhir dari node.

<!DOCTYPE html>

<html>

 

<head>

<title>

DOM appendChild() Method

</title>

 

<style>

h1, h2 

{

font-weight: bold;

color: green;}

 

body 

{

margin-left: 130px;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Method appendChild() DOM

</h2>

 

<ul id="mkn">

<li>Jaringan Komputer</li>

<li>Struktur Data Bahasa C</li>

</ul>

 

<button onclick="Bons()">

Submit

</button>

 

<script>

function Bons() 

{

var node = document.createElement("LI");

var textnode = document.createTextNode("Web Technology");

node.appendChild(textnode);

document.getElementById("mkn").appendChild(node);

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Method appendChild() DOM

  • Jaringan Komputer
  • Struktur Data Bahasa C


Method DOM appendChild()

Contoh: mendeskripsikan kegunaan dari method appendChild() dengan cara melakukan append pada teks ke dokumen setelah dilakukan klik tombol submit.

<!DOCTYPE html>

<html>

 

<head>

<title>

Method appendChild() DOM

</title>

 

<style>

#sudo 

{

border: 1px solid green;

background-color: green;

margin-bottom: 10px;

color: white;

font-weight: bold;}

 

h1,h2 

{

text-align: center;

color: green;

font-weight: bold;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Metho appendChild() DOM

</h2>

 

<div id="sudo">

Web Untuk Belajar Bahas 

Pemrograman

</div>

 

<button onclick="bons()">

Submit

</button>

 

<script>

function bons() 

{

var node = document.createElement("P");

var t = document.createTextNode("makandanmakan");

node.appendChild(t);

document.getElementById("sudo").appendChild(node);

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Metho appendChild() DOM

Web Untuk Belajar Bahas Pemrograman

Komentar

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

    BalasHapus
    Balasan
    1. Berikut adalah jenis browser yang dapat digunakan untuk mengaktifkan method appendChild() DOM pada HTML:
      1. Google Chrome 1.0
      2. Internet Explorer 5.0
      3. Microsoft Edge 12.0
      4. Firefox 1.0
      5. Opera 5.0
      6. Safari 1.1

      Hapus
  2. Apa yang dimaksud dengan method appendChild() DOM pada HTML?

    BalasHapus
    Balasan
    1. Method appendChild() DOM HTML merupakan antarmuka yang berfungsi untuk menambahkan sebuah node atau simpul ke bagian akhir dari daftar child dari simpul induk yang telah ditentukan sebelumnya.

      Hapus
    2. Method HTML DOM appendChild() digunakan untuk membuat dan menambahkan simpul teks di akhir daftar simpul child.

      Hapus

Posting Komentar

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

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C