insertAdjacentHTML trong JavaScript và cách chèn mã HTML vào vị trí chỉ định | Laptrinhcanban.com

insertAdjacentHTML trong JavaScript và cách chèn mã HTML vào vị trí chỉ định

Hướng dẫn cách sử dụng phương thức insertAdjacentHTML trong JavaScrip. Bạn sẽ học được cách sử dụng insertAdjacentHTML để chèn Node được mô tả bởi đoạn mã HTML trong JavaScript sau bài học này.

insertAdjacentHTML trong JavaScript

insertAdjacentHTML trong JavaScript là một phương thức của Element Object, có tác dụng phân tích một chuỗi text chứa mã HTML hoặc XML thành một Node, và chèn Node này vào một vị trí chỉ định trong cây DOM.

Cú pháp sử dụng insertAdjacentHTML trong JavaScript để chèn Node tạo bởi mã HTML như sau:

element.insertAdjacentHTML(position, text);

Trong đó text là chuỗi ký tự chứa đoạn mã HTML hoặc XML, đoạn mã này sẽ được phân tích và tạo thành một Node mới. Và Node mới này sẽ được chèn vào DOM tại vị trị position chỉ định.

Đối số position sẽ quyết định vị trí chèn Node mới tạo so với element, và chúng ta có thể chỉ định nó bằng 1 trong 4 giá trị sau:

Tên vị tríÝ nghĩa
'beforebegin'Thêm vào trước element
'afterbegin'Thêm vào đằng trước Element con đầu tiên của element
'beforeend'Thêm vào đằng sau Element con cuối cùng của element
'afterend'Thêm vào sau element

Bạn có thể hình dung các vị trí này đơn giản như sau:

insertAdjacentHTML trong JavaScript

Trong đó, thẻ p chính là element, foo1 là phần tử con đầu tiên của thẻ p, và foo2 là phần tử con cuối cùng của thẻ p.

Lưu ý, chúng ta cần phải chỉ định text bằng chuỗi ký tự có thể phân tích thành mã HTML hoặc XML.

'<p class="msg">Xin chào</p>'

Ví dụ cụ thể, chúng ta có thể chèn đoạn mã HTML trên vào đằng sau một Element có id bằng sample như sau:

let element = document.getElementById('sample');
element.insertAdjacentHTML('afterend', '<p>Hello</p>');

Mã mẫu

Sau đây hãy cùng xem cách dùng insertAdjacentHTML để chèn Node được miêu tả bởi mã HTML vào vị trí chỉ định với ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ sử dụng insertAdjacentHTML</title>
</head>
<body>

<ul id="shopinfo">
<li id="item1">Shop bà Tám</li>
<li id="item2">Shop mẹ và bé</li>
</ul>

<button onClick="getElement();">Chèn Node</button>

<script>
function getElement(){

let element = document.getElementById('shopinfo');
element.insertAdjacentHTML('beforebegin', '<p>Danh sách tên shop</p>');

}
</script>
</body>
</html>

Trong mã HTML trên, chúng ta lấy Node có id="shopinfo" bằng phương thức getElementById.
Sau đó, bằng phương thức insertAdjacentHTML, chúng ta đã thêm một Node được miêu tả bởi mã HTML vào vị trí đằng trước Node này.

Và kết quả:

insertAdjacentHTML trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách dùng insertAdjacentHTML trong JavaScript để chèn Node tạo bởi mã HTML vào vị trí chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.