<!DOCTYPE html>
<html>
<head>
<title>Phương thức appendChild() di chuyển trong JavaScript</title>
</head>
<body>
<h1>Phương thức appendChild() di chuyển trong JavaScript</h1>
<p>Dùng để thêm một node (nút) phần tử HTML vào một thẻ HTML khác, nút được thêm vào là cuối thẻ, ngoài ra còn có thể di chuyển phần tử html từ thẻ này sang thẻ khác, ở ví dụ này mình di chuyển li cuối cùng ở ul này sang li ở vị trí cuối cùng của ul kia:</p>
<ul id="ulmot" style="border:1px solid red;padding:15px">
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Blog</li>
</ul>
<ul id="ulhai" style="border:1px solid red;padding:15px">
<li>Hosting</li>
<li>Liên hệ</li>
</ul>
<p>Click vào nút DI CHUYỂN để di chuyển li cuối cùng ở ul này sang li ở vị trí cuối cùng của ul kia </p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<script>
function diChuyen() {
const node = document.getElementById("ulhai").lastElementChild;
document.getElementById("ulmot").appendChild(node);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức appendChild() di chuyển trong JavaScript</title>
</head>
<body>
<h1>Phương thức appendChild() di chuyển trong JavaScript</h1>
<p>Dùng để thêm một node (nút) phần tử HTML vào một thẻ HTML khác, nút được thêm vào là cuối thẻ, ngoài ra còn có thể di chuyển phần tử html từ thẻ này sang thẻ khác, ở ví dụ này mình di chuyển li cuối cùng ở ul này sang li ở vị trí cuối cùng của ul kia:</p>
<ul id="ulmot" style="border:1px solid red;padding:15px">
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Blog</li>
</ul>
<ul id="ulhai" style="border:1px solid red;padding:15px">
<li>Hosting</li>
<li>Liên hệ</li>
</ul>
<p>Click vào nút DI CHUYỂN để di chuyển li cuối cùng ở ul này sang li ở vị trí cuối cùng của ul kia </p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<script>
function diChuyen() {
const node = document.getElementById("ulhai").lastElementChild;
document.getElementById("ulmot").appendChild(node);
}
</script>
</body>
</html>
