Giả sử bạn có một số HTML là một chuỗi:
let string_of_html = ` Cool `;Có thể nó đến từ một API hoặc bạn đã tự xây dựng nó từ các ký tự mẫu hoặc thứ gì đó.
Bạn có thể sử dụng innerHTMLđể đặt nó vào một phần tử, như:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Bạn có nhiều quyền kiểm soát hơn nếu sử dụng insertAdjacentHTMLhàm vì bạn có thể đặt HTML mới ở bốn vị trí khác nhau:
text inside node Bạn sử dụng nó như…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Có những trường hợp bạn có thể muốn DOM mới tạo vẫn ở trong JavaScript trước khi bạn làm bất cứ điều gì với nó. Trong trường hợp đó, bạn có thể phân tích cú pháp chuỗi của mình trước tiên, như:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Điều đó sẽ cung cấp cho bạn một DOM hoàn chỉnh, vì vậy sau đó bạn sẽ cần phải loại bỏ đứa trẻ mà bạn đã thêm. Giả sử nó chỉ có một phần tử mẹ, điều đó giống như…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Bây giờ bạn có thể làm điều đó new_elementkhi cần thiết, tôi cho rằng trước khi làm những gì bạn cần làm với nó.
Tuy nhiên, đơn giản hơn một chút để làm điều này:
let new_element = document.createRange() .createContextualFragment(string_of_html);Bạn sẽ nhận được phần tử trực tiếp dưới dạng một đoạn tài liệu để nối thêm hoặc bất cứ thứ gì khi cần thiết. Phương pháp này đáng chú ý là nó sẽ thực thi những thứ mà nó tìm thấy bên trong, điều này có thể hữu ích và nguy hiểm.
Có một lượng lớn sắc thái cho tất cả những điều này. Ví dụ: HTML cần phải hợp lệ. HTML không đúng định dạng sẽ không hoạt động. Không đúng định dạng cũng có thể khiến bạn ngạc nhiên, chẳng hạn như đưa vào một
Koen Schaft viết “Tạo nút DOM từ chuỗi HTML” đề cập đến những gì chúng ta có ở đây nhưng chi tiết hơn và với nhiều gotchas hơn.
sẽ thất bại vì nó thiếu a. #####