Membuat Node Teks HTML Menggunakan appendChild DOM
 |
| Ilustrasi Method appendChild DOM HTML |
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>
Blog Elfan
Method appendChild() DOM
- Jaringan Komputer
- Struktur Data Bahasa C
Method DOM appendChild()
<!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
- 2 Contoh Penggunaan Properti Children DOM pada HTML [klik]
- 3 Contoh Penggunaan Properti classList DOM pada HTML [klik]
- 3 Contoh Penggunaan Properti className DOM pada HTML [klik]
- Cara Penggunaan Method click() DOM pada HTML [klik]
- Cara Penggunaan Properti clientHeight DOM pada HTML [klik]
- Cara Penggunaan Properti clientLeft DOM pada HTML [klik]
- Cara Penggunaan Properti clientTop DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method appendChild() DOM pada HTML?
BalasHapusBerikut adalah jenis browser yang dapat digunakan untuk mengaktifkan method appendChild() DOM pada HTML:
Hapus1. 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
Apa yang dimaksud dengan method appendChild() DOM pada HTML?
BalasHapusMethod 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.
HapusMethod HTML DOM appendChild() digunakan untuk membuat dan menambahkan simpul teks di akhir daftar simpul child.
Hapus