Скажімо, у вас є HTML, який є рядком:
let string_of_html = ` Cool `;Можливо, це походить від API, або ви самі створили його з літералів шаблонів чи щось інше.
Ви можете використовувати, innerHTMLщоб помістити це в елемент, наприклад:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;У вас є трохи більше контролю, якщо ви використовуєте insertAdjacentHTMLфункцію, оскільки ви можете розмістити новий HTML у чотирьох різних місцях:
text inside node Ви використовуєте це як ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Існують обставини, коли вам може знадобитися, щоб нещодавно створений DOM все ще був у JavaScript, перш ніж щось робити з ним. У цьому випадку ви можете спочатку проаналізувати рядок, наприклад:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Це дасть вам повний DOM, тому вам потрібно буде витягнути дитину, яку ви додали. Якщо припустити, що він має лише один батьківський елемент, це як ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Тепер ви можете возитися з цим new_elementза потребою, я гадаю, перш ніж робити те, що вам потрібно з цим робити.
Зробити це трохи простіше:
let new_element = document.createRange() .createContextualFragment(string_of_html);Ви отримаєте елемент безпосередньо як фрагмент документа для додавання або як завгодно за потреби. Цей метод примітний тим, що він насправді буде виконувати знайдені всередині, що може бути як корисним, так і небезпечним.
У всьому цьому є значна кількість нюансів. Наприклад, HTML повинен бути дійсним. Неправильно сформований HTML просто не буде працювати. Неправильно сформований може також застати вас зненацька, як, наприклад, введення знака
Коен Шафт пише "Створити вузол DOM із рядка HTML", який охоплює те, що ми маємо тут, але більш докладно та з більшою кількістю прийомів.
не вдасться, оскільки в ньому відсутній a. #####