2 Contoh Penggunaan Method cloneNode() DOM pada HTML

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.

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.

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

Komentar

  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

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