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

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

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

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Phương thức cloneNode() thẻ li trong JavaScript</title>
</head>
<body>

<h1>Phương thức cloneNode() thẻ li trong JavaScript</h1>
<p>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, ở ví dụ này mình 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:</p>

<ul id="ulmot" style="border:1px solid red;padding:20px;">
  <li>Giới thiệu</li>
  <li>Hosting</li>
</ul>
<ul id="ulhai" style="border:1px solid red;padding:20px;">
  <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>
</body>
</html>
Phương thức cloneNode() thẻ li trong JavaScript nằm trong bài viết Phương thức cloneNode() trong JavaScript