Скажем, у вас есть 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», который описывает то, что у нас есть, но более подробно и с большим количеством ошибок.
потерпит неудачу, потому что отсутствует. #####