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

• Bùi Tấn Lực
• 1761
• 22/09/2025

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

Phương thức insertAdjacentText() trong JavaScript dùng để chèn văn bản vào trước hoặc vào sau các phần tử con của một phần tử HTML, chèn văn bản vào trước hoặc vào sau phần tử HTML.

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

phantu.insertAdjacentText(vitri, vanban);

phantu: Phần tử HTML.

vanban: Văn bản.

vitri: Vị trí cần chèn.

Vị trí chèn có 4 vị trí:

afterbegin: Chèn văn bản vào trước các phần tử con của một phần tử HTML.

beforeend: Chèn văn bản vào sau các phần tử con của một phần tử HTML.

beforebegin: Chèn văn bản vào trước phần tử HTML.

afterend: Chèn văn bản vào sau phần tử HTML.

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

Phương thức insertAdjacentText() afterbegin trong JavaScript

Chèn văn bản vào trước các phần tử con của một phần tử HTML:

h1id.insertAdjacentText("afterbegin", vanban);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentText() afterbegin trong JavaScript</title>
</head>
<body>

<h1 id="h1id">H1 - Phương thức insertAdjacentText() afterbegin trong JavaScript</h1>

<p>Chèn văn bản vào trước các phần tử con của một phần tử HTML:</p>

<button onclick="chenVanBan()">CHÈN VĂN BẢN</button>

<p>Click CHÈN VĂN BẢN để chèn văn bản vào trước các phần tử con của thẻ h1 có id h1id</p>

<script>
function chenVanBan() {
   // Lấy phần tử h1 có id h1id	
  const dividnut = document.getElementById("h1id");
  // Tạo văn bản
  const vanban = "Văn bản cần chèn";
  // Chèn văn bản vào trước các phần tử con của thẻ h1 có id h1id
  h1id.insertAdjacentText("afterbegin", vanban);
}
</script>
</body>
</html>

Chạy Thử

Phương thức insertAdjacentText() beforeend trong JavaScript

Chèn văn bản vào sau các phần tử con của một phần tử HTML:

h1id.insertAdjacentText("beforeend", vanban);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentText() beforeend trong JavaScript</title>
</head>
<body>

<h1 id="h1id">H1- Phương thức insertAdjacentText() beforeend trong JavaScript</h1>
<p>Chèn văn bản vào sau các phần tử con của một phần tử HTML:</p>
<button onclick="chenVanBan()">CHÈN VĂN BẢN</button>
<p>Click CHÈN VĂN BẢN để chèn văn bản vào sau các phần tử con của thẻ h1 có id h1id</p>
<script>
function chenVanBan() {
   // Lấy phần tử h1 có id h1id	
  const dividnut = document.getElementById("h1id");
  // Tạo văn bản
  const vanban = "Văn bản cần chèn";
  // Chèn văn bản vào sau các phần tử con của thẻ h1 có id h1id
  h1id.insertAdjacentText("beforeend", vanban);
}
</script>
</body>
</html>

Chạy Thử

Phương thức insertAdjacentText() beforebegin trong JavaScript

Chèn văn bản vào trước phần tử HTML.

h1id.insertAdjacentText("beforebegin", vanban);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentText() beforebegin trong JavaScript</title>
</head>
<body>
<h1 id="h1id">H1 - Phương thức insertAdjacentText() beforebegin trong JavaScript</h1>
<p>Chèn văn bản vào trước phần tử HTML:</p>
<button onclick="chenVanBan()">CHÈN VĂN BẢN</button>
<p>Click CHÈN VĂN BẢN để chèn văn bản vào trước thẻ h1 có id h1id</p>
<script>
function chenVanBan() {
   // Lấy phần tử h1 có id h1id	
  const dividnut = document.getElementById("h1id");
  // Tạo văn bản
  const vanban = "Văn bản cần chèn";
  // Chèn văn bản vào trước thẻ h1 có id h1id
  h1id.insertAdjacentText("beforebegin", vanban);
}
</script>
</body>
</html>

Chạy Thử

Phương thức insertAdjacentText() afterend trong JavaScript

Chèn văn bản vào sau phần tử HTML.

h1id.insertAdjacentText("afterend", vanban);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentText() afterend trong JavaScript</title>
</head>
<body>
<h1 id="h1id">H1 - Phương thức insertAdjacentText() afterend trong JavaScript</h1>
<p>Chèn văn bản vào sau phần tử HTML:</p>
<button onclick="chenVanBan()">CHÈN VĂN BẢN</button>
<p>Click CHÈN VĂN BẢN để chèn văn bản vào sau thẻ h1 có id h1id</p>
<script>
function chenVanBan() {
   // Lấy phần tử h1 có id h1id	
  const dividnut = document.getElementById("h1id");
  // Tạo văn bản
  const vanban = "Văn bản cần chèn";
  // Chèn văn bản vào sau thẻ h1 có id h1id
  h1id.insertAdjacentText("afterend", vanban);
}
</script>
</body>
</html>

Chạy Thử

Khi nào nên dùng insertAdjacentText() trong JavaScript?

insertAdjacentText() phù hợp khi bạn cần đưa một đoạn chữ vào vị trí cụ thể quanh một phần tử có sẵn mà không cần tạo thêm phần tử HTML. Cách này đặc biệt hữu ích khi nội dung được tạo từ dữ liệu động và chỉ nên được hiển thị dưới dạng văn bản.

Dùng insertAdjacentText() khi chỉ cần chèn nội dung văn bản

Nếu mục tiêu chỉ là thêm chữ trước, sau hoặc bên trong một phần tử, insertAdjacentText() giúp thao tác trực tiếp mà không phải tạo text node thủ công. Nội dung truyền vào được xem là văn bản, vì vậy các ký tự giống cú pháp HTML không biến thành phần tử mới.

Ví dụ, có thể thêm một thông báo ngay sau phần tử đang tồn tại:

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

title.insertAdjacentText('afterend', ' Nội dung đã được cập nhật.');

Cách này thích hợp với các thông báo ngắn, nhãn bổ sung hoặc dữ liệu được đưa vào giao diện từ JavaScript. Khi chỉ cần hiển thị chữ, việc sử dụng đúng phương thức sẽ giúp mã rõ ràng hơn và tránh xử lý HTML không cần thiết.

Chọn insertAdjacentText() thay vì insertAdjacentHTML() khi nào?

Hai phương thức có cách sử dụng gần giống nhau nhưng mục đích khác nhau. Nếu dữ liệu cần chèn chỉ là văn bản thuần, nên ưu tiên insertAdjacentText(). Ngược lại, khi thực sự cần tạo thêm cấu trúc phần tử, insertAdjacentHTML() mới phù hợp.

Điểm khác biệt dễ nhận thấy là chuỗi chứa ký tự giống HTML vẫn được giữ dưới dạng chữ khi dùng insertAdjacentText(). Chẳng hạn:

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

box.insertAdjacentText('beforeend', '<strong>Thông báo</strong>');

Trong trường hợp này, phần nội dung hiển thị vẫn là chuỗi strong cùng các ký tự liên quan thay vì tạo một phần tử HTML mới. Vì vậy, nếu dữ liệu đến từ người dùng hoặc nguồn bên ngoài và chỉ cần hiển thị như văn bản, đây thường là lựa chọn phù hợp hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức insertAdjacentText() 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 insertAdjacentText() 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