Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Membuat Node Teks HTML Menggunakan appendChild DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Pada artikel ini, akan dipelajari tentang method appendChild() pada Javascript DOM HTML, beserta pemahaman implementasinya pada contoh program.

Sebelum memahami lebih dalam materi tentang Membuat Node Teks HTML Menggunakan appendChild DOM, terlebih dahulu pelajari materi tentang: Properti accessKey DOM HTML dan Fungsinya, Membuat Dokumen HTML Menggunakan Writeln DOM, dan Menulis Konten HTML Menggunakan Write DOM.

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.

Baca Juga:

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

Artikel ini didedikasikan kepada: Ella Dea Safitri, Elvira Aulia Agatha, Erick Bayuda, Erwin Manik, dan Fadilla Rachman Darmawansyah. R.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Membuat Node Teks HTML Menggunakan appendChild DOM"

  1. AnonimSenin, 07 Februari 2022 pukul 12.07.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimSenin, 07 Februari 2022 pukul 12.08.00 WIB

      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. AnonimRabu, 23 Februari 2022 pukul 11.59.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimRabu, 23 Februari 2022 pukul 12.00.00 WIB

      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. AnonimRabu, 23 Februari 2022 pukul 12.01.00 WIB

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

      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 -