chènAdjacentHTML ở mọi nơi

Paul Kinlan

Nếu muốn chèn nội dung vào tài liệu HTML, chúng ta có 3 cách để thực hiện:

• Sử dụng các phương thức DOM như createNode và appendChild
• Sử dụng Mảnh tài liệu
• Sử dụng innerHTML

Có thể nói rằng chúng ta cũng có document.write cho một số trường hợp sử dụng.

innerHTML đã được chuẩn hoá trong HTML5 và cùng với đó là một phương thức đồng cấp insertAdjacentHTML hoạt động như innerHTML nhưng cho phép chúng ta xác định cụ thể hơn vị trí chúng ta muốn chèn nội dung HTML: beforeBegin, afterBegin, beforeEnd và afterEnd.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

Vào năm 2008, John Resig đã viết một bài viết về insertAdjacentHTML với kết luận sau:

Lưu ý: Việc trình duyệt triển khai phương thức này sẽ giúp giảm đáng kể lượng mã cần thiết để viết một thư viện JavaScript đáng tin cậy. Tôi rất mong chờ đến ngày phương thức này được sử dụng rộng rãi hơn (cùng với querySelectorAll) để chúng ta có thể thực sự nỗ lực và đơn giản hoá mã một cách nghiêm túc.

Cho đến nay, vấn đề chính với insertAdjacentHTML là thiếu tính năng hỗ trợ trình duyệt. Với việc Firefox triển khai insertAdjacentHTML kể từ phiên bản 8, tính năng này sẽ có trong tất cả các trình duyệt chính, bao gồm cả trình duyệt di động. Nếu muốn sử dụng tính năng này ngay và đảm bảo tính năng này hoạt động trong các phiên bản Firefox trước phiên bản 8, bạn có thể sử dụng polyfill này.