Lompat ke konten Lompat ke sidebar Lompat ke footer

Menduplikasi Node HTML Menggunakan cloneNode DOM

Method cloneNode() DOM pada HTML digunakan untuk melakukan copy atau clone sebuah node pada method cloneNode() yang dilakukan pemanggilan. Contoh, sebuah list item dapat diduplikasi dari satu list ke list lainnya menggunakan method ini.

2 Contoh Penggunaan Method cloneNode() DOM pada HTML
Ilustrasi cloneNode DOM HTML

Sebelum memahami lebih dalam materi tentang Menduplikasi Node HTML Menggunakan cloneNode DOM, terlebih dahulu pelajari materi tentang: Mendapatkan Nilai Width HTML Menggunakan clientWidth DOM [klik], Mendapatkan Nilai Border Top HTML Menggunakan clientTop DOM [klik], dan Mendapatkan Nilai Border Kiri HTML Menggunakan clientLeft DOM [klik].

Sintak:
yourNode.cloneNode([deep])

[deep] pada sintak adalah argumen yang bersifat opsional, dimana nilainya dapat diatur TRUE jika ingin melakukan proses copy node bersamaan dengan nilai atribut dan child node-nya, jika tidak, maka dapat diatur ke FALSE, jika hanya ingin melakukan copy node dan nilai atributnya saja.

Baca Juga:

Catatan: jika argumen yang dimiliki tidak spesifik, maka nilai [deep] akan diatur ke TRUE secara default.

Contoh:

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

Output:

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>

Output:

Blog Elfan

Portal ilmu komputer

  • Bons1
  • Bons2
  • Bons3
  • Bons4

Artikel ini didedikasikan kepada: Fathia Hanif Tiaraningrum, Faustina Helene Tunggadewi, Feby Rahma Aji, Ferry Afid Nugroho, dan Fina Maghfirotussaadah.

6 komentar untuk "Menduplikasi Node HTML Menggunakan cloneNode DOM"

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

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

      Hapus
  2. Apa fungsi dari method cloneNode() DOM pada HTML?

    BalasHapus
    Balasan
    1. Method 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.

      Hapus
  3. Apa yang dimaksud dengan method cloneNode() DOM pada HTML?

    BalasHapus
    Balasan
    1. Method 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

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 -