Phương thức before() trong JavaScript
Bùi Tấn Lực - 864
- 12/09/2025
Chức năng của Phương thức before() trong JavaScript
Phương thức before() trong JavaScript dùng để thêm chữ vào phía trước phần tử HTML hoặc thêm phần tử html vào trước phần tử HTML khác.
Cú pháp của Phương thức before() trong JavaScript
tenbien.before("chu");
tenbien: Tên biến là phần tử HTML dùng để thêm chữ trước phần tử này, thường dùng document.getElementById("giá trị id") để lấy.
chu: Thêm chữ vào.
tenbien.before(phantu);
tenbien: Tên biến là phần tử HTML dùng để thêm phần tử trước phần tử này, thường dùng document.getElementById("giá trị id") để lấy.
phantu: Phần tử mới tạo.
Code Phương thức before() trong JavaScript
Phương thức before() chữ trong JavaScript
Thêm chữ vào phía trước phần tử HTML khác:
document.getElementById("divid").before("Xin chào!.");
<div id="divid" style="border: 1px solid red; padding:20px">Thêm chữ vào trước ô này!</div>
<p>Nhấn vào nút THÊM để thêm chữ "Xin chào!." vào trước ô đỏ</p>
<button onclick="themChu()">THÊM</button>
<script>
function themChu() {
const divid = document.getElementById("divid");
divid.before("Xin chào!.");
}
</script>
Phương thức before() phần tử html trong JavaScript
Thêm phần tử html vào phía trước phần tử HTML khác:
document.getElementById("divid").before(h2);
<div id="divid" style="border: 1px solid red; padding:20px">Thêm phần tử HTML vào trước ô này!</div>
<p>Nhấn vào nút THÊM để thêm phần tử h2 vào trước ô đỏ</p>
<button onclick="themPhanTu()">THÊM</button>
<script>
function themPhanTu() {
const divid = document.getElementById("divid");
// Tạo phần tử h2
const h2 = document.createElement("h2");
// Thêm phần tử h2 vào trước phần tử có id divid
divid.before(h2);
// Thêm chữ vào phần tử h2
h2.append("Tiêu đề h2");
}
</script>
Khi Nào Nên Dùng before() Trong JavaScript?
Phương thức before() phù hợp khi cần đưa một hoặc nhiều nội dung vào ngay phía trước một phần tử đang tồn tại trong DOM. Cách này đặc biệt tiện lợi khi giao diện cần bổ sung thông báo, nhãn, hướng dẫn hoặc một phần tử mới mà không phải thao tác trực tiếp với phần tử cha.
Chèn nội dung trước phần tử hiện có
Khi muốn tạo một phần tử mới và đặt nó trước phần tử mục tiêu, có thể kết hợp before() với document.createElement(). Phần tử được thêm vào đúng vị trí ngay trước phần tử đang được chọn.
const title = document.querySelector(".title");
const note = document.createElement("p");
note.textContent = "Thông tin bổ sung";
title.before(note);
Cách làm này hữu ích khi nội dung mới cần giữ đúng thứ tự hiển thị trong giao diện. Ngoài phần tử DOM, before() còn có thể nhận chuỗi văn bản hoặc nhiều đối số, giúp việc chèn nội dung trở nên linh hoạt hơn.
before() khác gì với insertBefore()?
Cả before() và insertBefore() đều có thể đưa một nút mới lên trước phần tử khác, nhưng cách sử dụng khác nhau. Với before(), phương thức được gọi trực tiếp trên phần tử cần làm mốc nên cú pháp ngắn gọn và dễ đọc.
target.before(newElement);
Trong khi đó, insertBefore() được gọi từ phần tử cha và phải truyền phần tử mới cùng phần tử làm mốc vào phương thức.
target.parentNode.insertBefore(newElement, target);
Vì vậy, khi không cần xử lý thêm cấu trúc của phần tử cha, before() thường là lựa chọn đơn giản hơn. Còn insertBefore() vẫn hữu ích trong những đoạn mã cần làm việc trực tiếp với quan hệ giữa phần tử cha và các nút con.
Những trường hợp không nên dùng before()
Không phải tình huống chèn nội dung nào cũng cần đến before(). Nếu nội dung cần đặt vào bên trong phần tử mục tiêu, chẳng hạn ở đầu danh sách con, nên cân nhắc các phương thức thao tác nội dung bên trong thay vì chèn một nút ra bên ngoài phần tử đó.
Ngoài ra, khi cần thay đổi hàng loạt phần tử trong DOM, việc gọi before() liên tục có thể khiến mã khó kiểm soát. Trong trường hợp này, nên chuẩn bị cấu trúc cần chèn trước rồi thực hiện cập nhật DOM theo cách phù hợp để mã rõ ràng và dễ bảo trì hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức before() 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 *
