Menduplikasi Node HTML Menggunakan cloneNode DOM
Catatan: jika argumen yang dimiliki tidak spesifik, maka nilai [deep] akan diatur ke TRUE secara default.
<!DOCTYPE html>
<html>
<head>
<title>
Method cloneNode() DOM pada
HTML
</title>
<!-- Mengatur properti CSS
untuk elemen -->
<style>
h1,h2
{
color: green;}
</style>
</head>
<body style="text-align: center;">
<div style="border:3px solid green">
<h1>
Blog Elfan
</h1>
<h2>
Portal ilmu komputer
</h2>
</div>
<button onclick="nClone()">
Klik disini untuk melakukan
kloning elemen.
</button>
<!-- Fungsi nClone() digunakan
untuk melakukan fetch node dan
menerapkan method pada fungsi
tersebut, serta melakukan
duplikasi bersamaan dengan
elemen lainnya -->
<script>
function nClone()
{
// Mengakses atribut div
// menggunakan variabel
var Bons =
document.getElementsByTagName("DIV")[0];
// Duplikasi variabel Bons ke
// sebuah variabel lain dengan
// nama clone
var clone = Bons.cloneNode(true);
// Penambahan variabel clone
// pada bagian akhir dari
// dokumen
document.body.appendChild(clone);
}
</script>
</body>
</html>
Blog Elfan
Portal ilmu komputer
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Method cloneNode() DOM pada
HTML
</title>
<!-- Mengatur properti CSS
menuju ke elemen -->
<style>
h1, h2
{
color: green;}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Portal ilmu komputer
</h2>
<ul
id="list1">
<li>Bons1</li>
<li>Bons2</li>
</ul>
<ul
id="list2">
<li>Bons3</li>
<li>Bons4</li>
</ul>
<button
onclick="clone()">
Try it
</button>
<script>
function clone()
{
// Mengakses item terakhir
// list2 dan menyimpannya pada
// variabel "Bons".
var listItem = document.getElementById("list2").lastChild;
// Menduplikasi variabel
// listItem ke sebuah variabel
// bernama clone.
var clone = listItem.cloneNode(true);
// Penambahanan variabel clone
// pada bagian akhir dari
// list1.
document.getElementById("list1").appendChild(clone);
}
</script>
</body>
</html>
Blog Elfan
Portal ilmu komputer
- Bons1
- Bons2
- Bons3
- Bons4
- 2 Contoh Penggunaan Properti firstChild DOM pada HTML
- 2 Nilai Return Properti firstElementChild DOM pada HTML
- 2 Contoh Penggunaan Method focus() DOM pada HTML
- 2 Contoh Penggunaan Method getAttribute() DOM pada HTML
- Cara Penggunaan Method getAttributeNode() DOM pada HTML
- 8 Properti Penggunaan Method getBoundingClientRect() DOM pada HTML
- 2 Contoh Penggunaan Method hasAttributes() DOM pada HTML
6 komentar untuk "Menduplikasi Node HTML Menggunakan cloneNode DOM"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method cloneNode() DOM pada HTML?
BalasHapusBerikut adalah jenis browser yang dapat digunakan untuk mengaktifkan method cloneNode() DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa fungsi dari method cloneNode() DOM pada HTML?
BalasHapusMethod cloneNode() DOM pada HTML berfungsi untuk membuat salinan dari node, dan mengembalikannya ke sumber node sebelumnya. Method cloneNode() merupakan method yang melakukan kloning dari semua nilai atribut beserta nilainya, jika nilai parameter diatur ke tipe TRUE, jika tidak maka nilai parameter diatur ke tipe FALSE dan method tidak akan melakukan proses kloning apapun pada node.
HapusApa yang dimaksud dengan method cloneNode() DOM pada HTML?
BalasHapusMethod cloneNode() merupakan method yang digunakan untuk mengkloning elemen dari satu daftar ke daftar lainnya. Method cloneNode() disediakan oleh Javascript, dimana method ini akan membuat salinan node dan akan mengembalikan nilai klonnya tersebut. Method cloneNode dapat digunakan untuk mengkloning semua atribut beserta nilanya.
Hapus