Bùi Tấn Lực - 124
- 21/09/2025
Bùi Tấn Lực 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
Chèn chuỗi HTML vào trước một phần tử HTML, ở ví dụ này mình thêm thẻ p trước thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:
prett.insertAdjacentHTML('beforebegin', noiDungHtml);
<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML beforebegin trong JavaScript</title>
</head>
<body>
<h1>Phương thức insertAdjacentHTML beforebegin trong JavaScript</h1>
<p>Chèn chuỗi HTML vào trước một phần tử HTML, ở ví dụ này mình thêm thẻ p trước thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:</p>
<div id="divid">
<pre><code>insertAdjacentHTML beforebegin</code></pre>
<pre><code>insertAdjacentHTML beforebegin</code></pre>
<pre><code>insertAdjacentHTML beforebegin</code></pre>
<pre><code>insertAdjacentHTML beforebegin</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
const noiDungHtml = "<p>Copy</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);
}
}
}
</script>
</body>
</html>
Kết quả:
Copy
insertAdjacentHTML beforebegin
Copy
insertAdjacentHTML beforebegin
Copy
insertAdjacentHTML beforebegin
Copy
insertAdjacentHTML beforebegin
Phương thức insertAdjacentHTML afterend trong JavaScript
Chèn chuỗi HTML vào sau một phần tử HTML, ở ví dụ này mình thêm thẻ p sau thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:
prett.insertAdjacentHTML('afterend', noiDungHtml);
<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML afterend trong JavaScript</title>
</head>
<body>
<h1>Phương thức insertAdjacentHTML afterend trong JavaScript</h1>
<p>Chèn chuỗi HTML vào sau một phần tử HTML, ở ví dụ này mình thêm thẻ p sau thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:</p>
<div id="divid">
<pre><code>insertAdjacentHTML afterend</code></pre>
<pre><code>insertAdjacentHTML afterend</code></pre>
<pre><code>insertAdjacentHTML afterend</code></pre>
<pre><code>insertAdjacentHTML afterend</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
const noiDungHtml = "<p>Copy</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
prett.insertAdjacentHTML('afterend', noiDungHtml);
}
}
}
</script>
</body>
</html>
Kết quả:
insertAdjacentHTML afterend
Copy
insertAdjacentHTML afterend
Copy
insertAdjacentHTML afterend
Copy
insertAdjacentHTML afterend
Copy
Phương thức insertAdjacentHTML afterbegin trong JavaScript
Chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha:
divid.insertAdjacentHTML("afterbegin", chuoihtml);
<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML afterbegin trong JavaScript</title>
</head>
<body>
<h1>Phương thức insertAdjacentHTML afterbegin trong JavaScript</h1>
<p>Chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha:</p>
<div id="divid" style="border:1px solid red; padding:10px; margin-bottom:10px">
<p>Thẻ p 1</p>
<p>Thẻ p 2</p>
<p>Thẻ p 3</p>
</div>
<button onclick="myFunction()">CHÈN</button>
<p>Click "CHÈN" để chèn chuỗi HTML thẻ p màu đỏ vào trước các phần tử con của thẻ div màu đỏ</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' >Thẻ p 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>
</body>
</html>
Phương thức insertAdjacentHTML beforeend trong JavaScript
Chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha:
divid.insertAdjacentHTML("beforeend", chuoihtml);
<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML beforeend trong JavaScript</title>
</head>
<body>
<h1>Phương thức insertAdjacentHTML beforeend trong JavaScript</h1>
<p>Chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha:</p>
<div id="divid" style="border:1px solid red; padding:10px; margin-bottom:10px">
<p>Thẻ p 1</p>
<p>Thẻ p 2</p>
<p>Thẻ p 3</p>
</div>
<button onclick="myFunction()">CHÈN</button>
<p>Click "CHÈN" để chèn chuỗi HTML thẻ p màu đỏ vào sau các phần tử con của thẻ div màu đỏ</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' >Thẻ p 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>
</body>
</html>
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.
- 0 Bình luận
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 *
