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

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

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, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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.

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:

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

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

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

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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn