Công ty thiết kế website chuẩn SEO Web Mới
Tìm kiếm
Công ty thiết kế website chuẩn SEO Web Mới

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

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

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

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ử

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.

  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
  • Zalo
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 *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đă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
JAVASCRIPT Hàm Ngày/Giờ (Date/Time)
JAVASCRIPT DOM Phần tử HTML
Kiến thức CSS
Kiến thức PHP
Kiến thức về website
Thiết kế website
0398.259.259