Да кажем, че имате 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 просто няма да работи. Неправилно оформеният може също да ви изненада, като поставяне на a
Koen Schaft пише „Създаване на DOM възел от HTML низ“, който обхваща това, което имаме тук, но по-подробно и с повече от увлеченията.
ще се провали, защото липсва. #####