Phương thức insertBefore() di chuyển node trong JavaScript

Phương thức insertBefore() di chuyển node trong JavaScript

Phương thức insertBefore() di chuyển node trong JavaScript

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertBefore() di chuyển node trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertBefore() di chuyển node trong JavaScript</h1>
<p>Phương thức insertBefore() trong JavaScript dùng để chèn một node phần tử HTML như li, option vào thẻ ul, select,... ngoài ra còn có thể di chuyển node phần tử html từ ul này sang ul khác hoặc từ select này sang select khác</p>
<p>Di chuyển một thẻ HTML, ví dụ di chuyển thẻ li tử ul này sang ul khác, thường áp dùng cho thẻ li trong ul và thẻ option trong select:</p>

<ul id="ulmot" style="border:1px solid red; padding: 0px 20px">
  <li>Giới thiệu</li>
  <li>Hosting</li>
</ul>
<ul id="ulhai" style="border:1px solid red; padding: 0px 20px">
  <li>Blog</li>
  <li>Tên miền</li>
  <li>Liên hệ</li>
</ul>
<p>Nhấn vào nút DI CHUYỂN NODE để di chuyển li liên hệ từ ul hai về ul một </p>
<button onclick="diChuyenNode()">DI CHUYỂN NODE</button>
<script>
function diChuyenNode() {
// Lấy li cuối cùng của ul hai
const nodeli = document.getElementById("ulhai").lastElementChild;
// Lấy ID của ul một
const ulmot = document.getElementById("ulmot");
// Di chuyển li cuối cùng của ul hai về 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(nodeli, ulmot.children[0]);
}
</script>
</body>
</html>
Phương thức insertBefore() di chuyển node trong JavaScript nằm trong bài viết Phương thức insertBefore() trong JavaScript