Phương thức insertBefore() trong JavaScript

• Bùi Tấn Lực
• 32
• 13/09/2025

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,... , chi tiết như nào hãy cùng chúng tôi phân tích:

Phương thức insertBefore() trong JavaScript

Chức năng của Phương thức insertBefore() trong JavaScript

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.

Code Phương thức insertBefore() trong JavaScript

Phương thức insertBefore() node mới trong JavaScript

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.

<ul id="ulid">
<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>

Chạy Thử

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

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.

<ul id="ulmot">
  <li>Giới thiệu</li>
  <li>Hosting</li>
</ul>
<ul id="ulhai">
  <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>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức insertBefore() trong JavaScript.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức insertBefore() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn