Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertBefore() node mới trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertBefore() node mới 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>Tạo một node phần tử HTML mới sau đó chèn nó trước vị trị của một thẻ HTML hoặc để ở vị trí cuối cùng, thường áp dùng cho thẻ li trong ul và thẻ option trong select:</p>

<ul id="ulid" style="border:1px solid red; padding:20px">
<li>Giới thiệu</li>
<li>Blog</li>
</ul>
<p>Nhấn vào nút THÊM NODE HTML để tạo thẻ li và thêm vào ul.</p>
<button onclick="themNodeHtml()">THÊM NODE HTML</button>
<script>
function themNodeHtml() {
// Tạo phần tử HTML LI
const nodeli = document.createElement("li");
// Tạo node văn vản
const nodechu = document.createTextNode("Trang chủ");
// Thêm node chữ vào node phần tử HTML vừa tạo
nodeli.appendChild(nodechu);
// Lấy ID của thẻ UL
const ulid = document.getElementById("ulid");
// Chèn node li mới tạo vào ul ở trước vị trí 0 (vị trí đầu tiên), bạn có thể chọn children là 1 hoặc 2
ulid.insertBefore(nodeli, ulid.children[0]);
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertBefore() node mới trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertBefore() node mới 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>Tạo một node phần tử HTML mới sau đó chèn nó trước vị trị của một thẻ HTML hoặc để ở vị trí cuối cùng, thường áp dùng cho thẻ li trong ul và thẻ option trong select:</p>

<ul id="ulid" style="border:1px solid red; padding:20px">
<li>Giới thiệu</li>
<li>Blog</li>
</ul>
<p>Nhấn vào nút THÊM NODE HTML để tạo thẻ li và thêm vào ul.</p>
<button onclick="themNodeHtml()">THÊM NODE HTML</button>
<script>
function themNodeHtml() {
// Tạo phần tử HTML LI
const nodeli = document.createElement("li");
// Tạo node văn vản
const nodechu = document.createTextNode("Trang chủ");
// Thêm node chữ vào node phần tử HTML vừa tạo
nodeli.appendChild(nodechu);
// Lấy ID của thẻ UL
const ulid = document.getElementById("ulid");
// Chèn node li mới tạo vào ul ở trước vị trí 0 (vị trí đầu tiên), bạn có thể chọn children là 1 hoặc 2
ulid.insertBefore(nodeli, ulid.children[0]);
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertBefore() node mới trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertBefore() node mới 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>Tạo một node phần tử HTML mới sau đó chèn nó trước vị trị của một thẻ HTML hoặc để ở vị trí cuối cùng, thường áp dùng cho thẻ li trong ul và thẻ option trong select:</p>

<ul id="ulid" style="border:1px solid red; padding:20px">
<li>Giới thiệu</li>
<li>Blog</li>
</ul>
<p>Nhấn vào nút THÊM NODE HTML để tạo thẻ li và thêm vào ul.</p>
<button onclick="themNodeHtml()">THÊM NODE HTML</button>
<script>
function themNodeHtml() {
// Tạo phần tử HTML LI
const nodeli = document.createElement("li");
// Tạo node văn vản
const nodechu = document.createTextNode("Trang chủ");
// Thêm node chữ vào node phần tử HTML vừa tạo
nodeli.appendChild(nodechu);
// Lấy ID của thẻ UL
const ulid = document.getElementById("ulid");
// Chèn node li mới tạo vào ul ở trước vị trí 0 (vị trí đầu tiên), bạn có thể chọn children là 1 hoặc 2
ulid.insertBefore(nodeli, ulid.children[0]);
}
</script>
</body>
</html>

Phương thức insertBefore() node mới trong JavaScript nằm trong bài viết Phương thức insertBefore() trong JavaScript