Phương thức insertBefore() trong JavaScript
Bùi Tấn Lực - 938
- 13/09/2025
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.
Cú pháp của Phương thức insertBefore() trong JavaScript
phantuchua.insertBefore(nutchen, vitrichen);
phantuchua: Phần tử chứa nút chèn vào, thường dùng document.getElementById("giá trị id") để lấy.
nutchen: Nút để chèn vào.
vitrichen: Ví trí chèn, nếu chèn ở vị trí cuối cùng thì để null, nếu muốn để trước vị trí nào thì phantucha.children[vị trí đó], ví dụ trước vị trí 0 hiện tại thì phantucha.children[0], trước vị trí 2 hiện tại thì phantucha.children[2].
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:
ulid.insertBefore(nodeli, ulid.children[0]);
<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>
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:
ulmot.insertBefore(nodeli, ulmot.children[0]);
<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>
Những điều cần lưu ý khi sử dụng insertBefore() trong JavaScript
Khi đã nắm được cách chèn một node, điều quan trọng tiếp theo là hiểu những tình huống có thể xảy ra trong thực tế. insertBefore() không chỉ dùng để tạo vị trí cho phần tử mới mà còn có thể thay đổi vị trí của node đang tồn tại. Hiểu rõ cách phương thức xử lý từng trường hợp sẽ giúp hạn chế lỗi khi thao tác với DOM.
insertBefore() sẽ làm gì khi vị trí chèn là null?
Nếu tham số chỉ vị trí chèn được truyền vào là null, node mới sẽ được thêm vào cuối danh sách node con của phần tử cha. Đây là cách thuận tiện khi muốn sử dụng cùng một phương thức cho cả trường hợp chèn trước một node cụ thể và thêm phần tử vào cuối.
const parent = document.querySelector("#menu");
const item = document.createElement("li");
item.textContent = "Mục mới";
parent.insertBefore(item, null);
Trong ví dụ trên, item được đưa xuống cuối phần tử có id là menu. Cách viết này cũng giúp tránh phải tìm node cuối cùng chỉ để thêm một phần tử mới.
Có thể dùng insertBefore() để di chuyển phần tử đang tồn tại không?
Có. Khi node truyền vào đã tồn tại trong DOM, insertBefore() sẽ di chuyển node đó đến vị trí mới thay vì tạo thêm một bản sao. Đây là điểm hữu ích khi cần sắp xếp lại danh sách hoặc thay đổi thứ tự các thành phần trên giao diện.
const list = document.querySelector("#menu");
const item = document.querySelector("#item-3");
const target = document.querySelector("#item-1");
list.insertBefore(item, target);
Sau khi thực hiện, item-3 sẽ được chuyển lên trước item-1. Node ban đầu không bị nhân đôi nên các thuộc tính và trạng thái gắn với node đó vẫn được giữ lại.
Điều gì xảy ra khi phần tử cần chèn không thuộc cùng một thẻ cha?
Node được chèn không bắt buộc phải có cùng phần tử cha với vị trí đích. Nếu node đang nằm ở một nơi khác trong DOM, insertBefore() có thể di chuyển node đó sang phần tử cha mới. Node sẽ được loại khỏi vị trí cũ và xuất hiện ở vị trí mới.
Tuy nhiên, phần tử đích phải là node con của phần tử cha đang gọi insertBefore(). Nếu truyền vào một node không thuộc phần tử cha đó, thao tác có thể phát sinh lỗi. Vì vậy, trước khi thực hiện nên xác định rõ quan hệ giữa node cha, node cần chèn và node làm mốc.
Nên dùng insertBefore() hay before() trong JavaScript?
Hai phương thức có mục đích gần nhau nhưng cách sử dụng khác nhau. insertBefore() được gọi từ phần tử cha và nhận node cần chèn cùng node làm mốc. Trong khi đó, before() được gọi trực tiếp trên node làm vị trí tham chiếu.
const parent = document.querySelector("#menu");
const item = document.createElement("li");
const target = document.querySelector("#item-2");
item.textContent = "Mục mới";
parent.insertBefore(item, target);
Với cách viết hiện đại, before() có thể ngắn gọn hơn khi đã có sẵn node làm mốc. Ngược lại, insertBefore() phù hợp khi logic xử lý đang bắt đầu từ phần tử cha và cần kiểm soát rõ node nào được đưa vào vị trí nào.
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.
- 0 Bình luận
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 *
