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

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

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

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

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:

<h1 id="h1id">Thẻ h1</h1>
<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>

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:

<h1 id="h1id">Thẻ h1</h1>
<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>

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.

<h1 id="h1id">Thẻ h1</h1>
<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>

Chạy Thử

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

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

<h1 id="h1id">Thẻ h1</h1>
<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>

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 insertAdjacentText() trong JavaScript.

Bùi Tấn Lực

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 *

Đă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