Phương thức cloneNode() trong JavaScript

• Bùi Tấn Lực
• 981
• 13/09/2025

Chức năng của Phương thức cloneNode() trong JavaScript

Phương thức cloneNode() trong JavaScript dùng để copy nút html, phần tử, các nút con trong phần tử html đến một thẻ HTML khác, nếu để false thì chỉ copy nút phần tử html và các thuộc tính trong phần tử HTML còn các nút con thì không copy được.

Khi copy thì trình lắng nghe sự kiện addEventListener() sẽ không hoạt động được vì bị đụng lẫn nhau, cho nên trước khi copy bạn nên tổ chức lại addEventListener() cho phù hợp.

Cú pháp của Phương thức cloneNode() trong JavaScript

const nutcopy = nut.cloneNode(dieukien);

nut: Nút phần tử vừa chọn để copy.

dieukien: nếu là true thì copy nút html, phần tử, các nút con trong phần tử html, nếu false thì chỉ copy nút phần tử html và các thuộc tính trong phần tử HTML còn các nút con thì không copy được.

nutcopy: Trả về nút (node) thuộc dạng copy chứ không cut.

Code Phương thức cloneNode() trong JavaScript

Phương thức cloneNode() thẻ li trong JavaScript

Copy một nút li, các thuộc tính trong thẻ li, các nút con trong thẻ li từ ul này sang ul khác:

const clone = nodeli.cloneNode(true); 

<ul id="ulmot">
  <li>Giới thiệu</li>
  <li>Hosting</li>
</ul>
<ul id="ulhai">
  <li>Blog</li>
  <li>Tên miền</li>
  <li>Liên hệ</li>
</ul>
<p>Nhấn vào nút COPY để copy li liên hệ từ ul hai đến ul một </p>
<button onclick="copyNut()">COPY</button>
<script>
function copyNut() {
// Lấy li cuối cùng của ul hai
const nodeli = document.getElementById("ulhai").lastElementChild;
// Chuyển Node li về dạng copy chứ không cut
const clone = nodeli.cloneNode(true); // Copy nút, thuộc tính, và các nút con
// Lấy ID của ul một
const ulmot = document.getElementById("ulmot");

// Copy li cuối cùng của ul hai đến vị trí trước vị trí 0 hiện tại của ul một, có thể tùy chọn trước vị trí 1, nếu muốn để vị trí cuối cùng thì thay ulmot.children[0] thành null.
ulmot.insertBefore(clone, ulmot.children[0]);
}
</script>

Chạy Thử

Phương thức cloneNode() thẻ div trong JavaScript

Copy một nút div, các thuộc tính trong thẻ div, các nút con trong thẻ div đến một div khác:

const clone = node.cloneNode(true);

<div id="divcopy" style="width:100%;height:50px;float:left;line-height:50px;border:1px solid #000;background:red;color:#000;text-align:center;margin-bottom:5px">Nội dung cần copy</div>
<div id="divpaste"></div>
<p>Nhấn vào nút COPY để copy nút html, thuộc tính trong nút html, các nút con trong html </p>
<button onclick="copyNut()">COPY</button>
<script>
function copyNut() {
  // Lấy ID divcopy
  const node = document.getElementById("divcopy");
  // Chuyển node vừa lấy sang dạng copy
  const clone = node.cloneNode(true);
  // Thêm node html vừa copy vô divpaste
  document.getElementById("divpaste").appendChild(clone);
}
</script>

Chạy Thử

Những điều cần lưu ý khi sử dụng cloneNode() trong JavaScript

Khi dùng cloneNode() để nhân bản phần tử, việc tạo ra một bản sao giống phần tử ban đầu chỉ là bước đầu. Để tránh lỗi khi đưa phần tử mới vào giao diện, cần chú ý đến cách sao chép nội dung, sự kiện và các thuộc tính định danh của phần tử.

cloneNode(true) và cloneNode(false) khác nhau như thế nào?

Tham số truyền vào cloneNode() quyết định phần tử con có được sao chép hay không. Với true, JavaScript tạo bản sao gồm cả cây phần tử bên trong. Với false hoặc không truyền tham số, chỉ phần tử được chọn được nhân bản.

const original = document.querySelector(".product");

const fullClone = original.cloneNode(true);
const emptyClone = original.cloneNode(false);

Vì vậy, cloneNode(true) phù hợp khi cần nhân bản một cấu trúc hoàn chỉnh như một thẻ sản phẩm, dòng danh sách hoặc khối nội dung. Ngược lại, cloneNode(false) hữu ích khi chỉ cần tạo một phần tử mới có cùng tên thẻ và các thuộc tính cơ bản.

cloneNode() có sao chép sự kiện và dữ liệu của phần tử không?

cloneNode() không sao chép các trình xử lý sự kiện được gắn bằng JavaScript như addEventListener(). Bản sao có thể giữ lại các thuộc tính HTML, nội dung và cấu trúc phần tử, nhưng sự kiện đã đăng ký trên phần tử ban đầu không tự động hoạt động trên bản sao.

const button = document.querySelector("button");
const copy = button.cloneNode(true);

copy.addEventListener("click", () => {
    console.log("Nút sao chép đã được nhấn");
});

document.body.appendChild(copy);

Nếu phần tử nhân bản cần có hành vi tương tác riêng, nên gắn lại sự kiện cho bản sao sau khi tạo. Với các giao diện có nhiều phần tử động, có thể cân nhắc event delegation để giảm số lượng trình xử lý sự kiện cần quản lý.

Cách tránh trùng ID khi sao chép phần tử HTML

Một lỗi thường gặp là nhân bản phần tử có thuộc tính id. Vì cloneNode() giữ lại các thuộc tính của phần tử gốc nên bản sao có thể mang cùng ID với phần tử ban đầu. Điều này khiến một trang xuất hiện nhiều phần tử có cùng định danh, gây khó khăn khi truy vấn và xử lý DOM.

const original = document.querySelector("#product");
const copy = original.cloneNode(true);

copy.id = "product-copy";

document.body.appendChild(copy);

Nếu tạo nhiều bản sao, nên sinh ID mới cho từng phần tử thay vì cố định một giá trị. Trường hợp ID không thực sự cần thiết, có thể sử dụng class hoặc thuộc tính data-* để quản lý các phần tử được nhân bản linh hoạt hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức cloneNode() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức cloneNode() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp