Anta att du har lite HTML som är en sträng:
let string_of_html = ` Cool `;Kanske kommer det från ett API eller så har du konstruerat det själv från mallbokstäver eller något.
Du kan använda för innerHTMLatt sätta det i ett element, som:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Du har lite mer kontroll om du går med insertAdjacentHTMLfunktionen eftersom du kan placera den nya HTML-filen på fyra olika platser:
text inside node Du använder det som ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Det finns omständigheter där du kanske vill ha den nyskapade DOM fortfarande i JavaScript innan du gör något med det. I så fall kan du analysera din sträng först, som:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Det ger dig en fullständig DOM, så du måste sedan rycka ut barnet du lade till. Om vi antar att det bara har ett överordnat element, det är som ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Nu kan du röra med det new_elementefter behov, antar jag innan du gör vad du behöver göra med det.
Det är dock lite enklare att göra detta:
let new_element = document.createRange() .createContextualFragment(string_of_html);Du får elementet direkt som ett dokumentfragment att lägga till eller vad som helst vid behov. Den här metoden är anmärkningsvärd genom att den faktiskt kommer att utföras som den hittar inuti, vilket kan vara både användbart och farligt.
Det finns en avsevärd nyans i allt detta. Till exempel måste HTML vara giltigt. Felaktig HTML kommer bara inte att fungera. Missformad kan också överraska dig, som att sätta ett i ett
Koen Schaft skriver "Skapa en DOM-nod från en HTML-sträng" som täcker vad vi har här men mer detaljerat och med fler av gotchas.
kommer att misslyckas eftersom det saknas a. #####