Phương thức insertAdjacentHTML trong JavaScript

• Bùi Tấn Lực
• 24
• 21/09/2025

Phương thức insertAdjacentHTML trong JavaScript dùng để chèn chuỗi HTML vào trước một phần tử HTML, chèn chuỗi HTML vào sau 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 insertAdjacentHTML trong JavaScript

Chức năng của Phương thức insertAdjacentHTML trong JavaScript

Phương thức insertAdjacentHTML trong JavaScript dùng để chèn chuỗi HTML vào trước một phần tử HTML, chèn chuỗi HTML vào sau một phần tử HTML, chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha, chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha.

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

phantuhtml.insertAdjacentHTML(vitrichen, chuoihtml);

phantuhtml: Phần tử HTML.

vitrichen: Vị trí chèn,

chuoihtml: Chuỗi HTML cần chèn.

Vị trí chèn gồm 4 vị trí:

beforebegin: Chèn chuỗi HTML vào trước một phần tử HTML.

afterend: Chèn chuỗi HTML vào sau một phần tử HTML.

afterbegin: Chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha.

beforeend: Chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha.

Code Phương thức insertAdjacentHTML trong JavaScript

Phương thức insertAdjacentHTML beforebegin trong JavaScript

Ở ví dụ này mình  thêm thẻ p trước thẻ pre, thẻ p chứa thẻ span làm nút copy nội dung thẻ pre:

<div id="divid">
	<pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
</div>
<script>
// Lấy nút phần tử id divid
const divid = document.getElementById('divid');
if(divid){
// Lấy danh sách phần tử HTML pre trong phần tử id divid
const pres = divid.getElementsByTagName('pre');
// Lặp qua từng phần tử HTML pre trong phần tử id divid
for (let i = 0; i < pres.length; i++) {
// Tạo phần tử HTML p, có class, title, thẻ span bên trong
const noiDungHtml = "<p class='copyc'><span title='Click để Copy' class='copycs' id='scopy"+i+"'  data-id='"+i+"'"+">Copy</span></p>";
// Lấy thẻ pre cần thêm
const prett = divid.getElementsByTagName("pre")[i];
if(prett){
    // Thêm thẻ p vào phía trước thẻ pre
	prett.insertAdjacentHTML('beforebegin', noiDungHtml);
}
// Thêm thuộc tính id cho pre
divid.getElementsByTagName("pre")[i].setAttribute("id", "pre"+i);		  
		  
}

}
</script>

Kết quả:

Copy

insertAdjacentHTML()
Copy

insertAdjacentHTML()
Copy

insertAdjacentHTML()
Copy

insertAdjacentHTML()

Chạy Thử

Phương thức insertAdjacentHTML afterend trong JavaScript

Ở ví dụ này mình  thêm thẻ p sau thẻ pre, thẻ p chứa thẻ span làm nút copy nội dung thẻ pre:

<div id="divid">
	<pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
    <pre><code>insertAdjacentHTML()</code></pre>
</div>
<script>
// Lấy nút phần tử id divid
const divid = document.getElementById('divid');
if(divid){
// Lấy danh sách phần tử HTML pre trong phần tử id divid
const pres = divid.getElementsByTagName('pre');
// Lặp qua từng phần tử HTML pre trong phần tử id divid
for (let i = 0; i < pres.length; i++) {
// Tạo phần tử HTML p, có class, title, thẻ span bên trong
const noiDungHtml = "<p class='copyc'><span title='Click để Copy' class='copycs' id='scopy"+i+"'  data-id='"+i+"'"+">Copy</span></p>";
// Lấy thẻ pre cần thêm
const prett = divid.getElementsByTagName("pre")[i];
if(prett){
    // Thêm thẻ p vào phía sau thẻ pre trong phần tử id divid
	prett.insertAdjacentHTML('afterend', noiDungHtml);
}
// Thêm thuộc tính id cho pre
divid.getElementsByTagName("pre")[i].setAttribute("id", "pre"+i);		  
		  
}

}
</script>

Kết quả:

insertAdjacentHTML()
Copy

insertAdjacentHTML()
Copy

insertAdjacentHTML()
Copy

insertAdjacentHTML()
Copy

Chạy Thử

Phương thức insertAdjacentHTML afterbegin trong JavaScript

Ở ví dụ này mình chèn chuỗi html vào trước các phần tử con của thẻ div có id bằng divid:

<div id="divid">
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
</div>
<button onclick="myFunction()">THÊM</button>
<p>Click "THÊM" để chèn thẻ p vào trước các phần tử con của thẻ div có id bằng divid</p>
<script>
function myFunction() {
  // lấy id cần chèn
  const divid = document.getElementById("divid");
  // tạo chuỗi html cần chèn
  let chuoihtml = "<p style='color:red' >insertAdjacentHTML() mới thêm</p>";
  // chèn chuỗi html vào trước các phần tử con của thẻ div có id bằng divid
  divid.insertAdjacentHTML("afterbegin", chuoihtml);
}
</script>

Chạy Thử

Phương thức insertAdjacentHTML beforeend trong JavaScript

Ở ví dụ này mình chèn chuỗi html vào sau các phần tử con của thẻ div có id bằng divid:

<div id="divid">
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
    <p>insertAdjacentHTML()</p>
</div>
<button onclick="myFunction()">THÊM</button>
<p>Click "THÊM" để chèn thẻ p vào sau các phần tử con của thẻ div có id bằng divid</p>
<script>
function myFunction() {
  // lấy id cần chèn
  const divid = document.getElementById("divid");
  // tạo chuỗi html cần chèn
  let chuoihtml = "<p style='color:red' >insertAdjacentHTML() mới thêm</p>";
  // chèn chuỗi html vào sau các phần tử con của thẻ div có id bằng divid
  divid.insertAdjacentHTML("beforeend", chuoihtml);
}
</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 insertAdjacentHTML trong JavaScript.

Bùi Tấn Lực

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