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

• Bùi Tấn Lực
• 856
• 12/09/2025

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

Phương thức after() trong JavaScript dùng để thêm chữ vào phía sau phần tử HTML hoặc thêm phần tử html vào phía sau phần tử HTML khác.

Cú pháp của Phương thức after() trong JavaScript

tenbien.after("chu");

tenbien: Tên biến là phần tử HTML dùng để thêm chữ sau phần tử này, thường dùng document.getElementById("giá trị id") để lấy.

chu: Thêm chữ vào.

tenbien.after(phantu);

tenbien: Tên biến là phần tử HTML dùng để thêm phần tử sau 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 after() trong JavaScript

Phương thức after() chữ trong JavaScript

Thêm chữ vào phía sau phần tử HTML:

document.getElementById("divid").after("Xin chào!.");

<div id="divid" style="border: 1px solid red; padding:20px">Thêm chữ vào sau ô này!</div>
<p>Nhấn vào nút THÊM để thêm chữ "Xin chào!." vào sau ô đỏ</p>
<button onclick="themChu()">THÊM</button>
<script>
function themChu() {
const divid = document.getElementById("divid");
divid.after("Xin chào!.");
}
</script>

Chạy Thử

Phương thức after() phần tử html trong JavaScript

Thêm phần tử html vào phía sau phần tử HTML khác:

document.getElementById("divid").after(h2);

<div id="divid" style="border: 1px solid red; padding:20px">Thêm phần tử HTML vào sau ô này!</div>
<p>Nhấn vào nút THÊM để thêm phần tử h2 vào sau ô đỏ</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 sau phần tử có id divid
divid.after(h2);
// Thêm chữ vào phần tử h2
h2.append("Tiêu đề h2");
}
</script>

Chạy Thử

Các trường hợp nên dùng after() trong JavaScript

Phương thức after() phù hợp khi cần chèn một hoặc nhiều nội dung mới ngay phía sau một phần tử đang tồn tại trên DOM. Cách này giúp giữ nguyên phần tử ban đầu và bổ sung nội dung ở đúng vị trí mong muốn mà không phải thao tác trực tiếp với phần tử cha.

Chèn nội dung mới ngay sau một phần tử

Đây là trường hợp dễ gặp khi xây dựng giao diện có nội dung được tạo hoặc cập nhật bằng JavaScript. Sau khi xác định phần tử cần làm mốc, có thể gọi after() để đặt phần tử mới ngay phía sau nó.

const title = document.querySelector('.title');
const note = document.createElement('p');

note.textContent = 'Nội dung được thêm sau tiêu đề.';
title.after(note);

Điểm đáng chú ý là phần tử title không bị thay thế hay di chuyển. Phần tử note chỉ được đưa vào ngay sau nó trong cùng một vị trí thuộc DOM.

Thêm nhiều nội dung cùng lúc bằng after()

after() có thể nhận nhiều đối số, vì vậy một lần gọi phương thức có thể chèn nhiều nội dung liên tiếp. Điều này hữu ích khi cần bổ sung một nhóm thông tin sau cùng một phần tử.

const item = document.querySelector('.item');

const first = document.createElement('p');
first.textContent = 'Thông tin thứ nhất';

const second = document.createElement('p');
second.textContent = 'Thông tin thứ hai';

item.after(first, second);

Các nội dung được truyền vào sẽ xuất hiện theo đúng thứ tự trong lời gọi. Nhờ đó, mã JavaScript có thể gọn hơn so với việc thực hiện nhiều thao tác chèn riêng biệt.

Khi nào nên dùng after() thay cho insertAdjacentElement()

Hai phương thức đều có thể đưa một phần tử vào phía sau phần tử hiện tại, nhưng cách sử dụng khác nhau. after() thuận tiện khi đã có sẵn đối tượng DOM và muốn thao tác trực tiếp với nó. Trong khi đó, insertAdjacentElement() phù hợp hơn khi cần chỉ rõ vị trí chèn thông qua tham số như afterend.

const element = document.querySelector('.item');
const newElement = document.createElement('div');

newElement.textContent = 'Nội dung mới';

element.after(newElement);

Nếu thao tác chủ yếu xoay quanh một phần tử DOM đã được chọn, after() thường dễ đọc và dễ bảo trì hơn. Khi cần kiểm soát nhiều vị trí chèn khác nhau trên cùng một phần tử, insertAdjacentElement() có thể linh hoạt hơn.

Lời kết

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

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức after() 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 *

Bình luận, Hỏi đáp