Si at du har litt HTML som er en streng:
let string_of_html = ` Cool `;Kanskje det kommer fra et API, eller du har konstruert det selv fra malbokstaver eller noe.
Du kan bruke innerHTMLtil å sette det i et element, som:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Du har litt mer kontroll hvis du går med insertAdjacentHTMLfunksjonen, ettersom du kan plassere den nye HTML-en på fire forskjellige steder:
text inside node Du bruker 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 er omstendigheter der du kanskje vil ha den nyopprettede DOM fortsatt i JavaScript før du gjør noe med det. I så fall kan du analysere strengen din først, som:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Det vil gi deg en komplett DOM, så du må da rykke ut barnet du la til. Forutsatt at det bare har ett foreldreelement, det er som ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Nå kan du rote med det new_elementetter behov, antar jeg før du gjør det du trenger å gjøre med det.
Det er litt enklere å gjøre dette skjønt:
let new_element = document.createRange() .createContextualFragment(string_of_html);Du får elementet direkte som et dokumentfragment å legge til eller hva som helst etter behov. Denne metoden er bemerkelsesverdig ved at den faktisk vil utføre den den finner inni, som kan være både nyttig og farlig.
Det er en betydelig nyanse i alt dette. For eksempel må HTML være gyldig. Misdannet HTML vil bare ikke fungere. Feilformet kan også overraske deg, som å sette en i en
Koen Schaft skriver "Lag en DOM-node fra en HTML-streng" som dekker det vi har her, men mer detaljert og med flere av gotchasene.
vil mislykkes fordi det mangler a. #####