Phương thức cloneNode() thẻ div trong JavaScript
Phương thức cloneNode() thẻ div trong JavaScript
Phương thức cloneNode() thẻ div trong JavaScript
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html>
<html>
<head>
<title>Phương thức cloneNode() thẻ div trong JavaScript</title>
</head>
<body>
<h1>Phương thức cloneNode() thẻ div 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 div, các thuộc tính trong thẻ div, các nút con trong thẻ div đến một div khác:</p>
<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" style="border:1px solid red; padding:20px; width:100%; float:left; height:auto; margin-bottom:10px"></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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức cloneNode() thẻ div trong JavaScript</title>
</head>
<body>
<h1>Phương thức cloneNode() thẻ div 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 div, các thuộc tính trong thẻ div, các nút con trong thẻ div đến một div khác:</p>
<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" style="border:1px solid red; padding:20px; width:100%; float:left; height:auto; margin-bottom:10px"></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>
</body>
</html>
Phương thức cloneNode() thẻ div trong JavaScript nằm trong bài viết Phương thức cloneNode() trong JavaScript