Sig, at du har nogle HTML, der er en streng:
let string_of_html = ` Cool `;
Måske kommer det fra en API, eller du har konstrueret det selv fra skabelonbogstaver eller noget.
Du kan bruge innerHTML
til at sætte det i et element, som:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;
Du har lidt mere kontrol, hvis du går med insertAdjacentHTML
funktionen, da du kan placere den nye HTML fire forskellige steder:
text inside node
Du bruger 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);
Der er omstændigheder, hvor du måske vil have den nyoprettede DOM stadig i JavaScript, før du gør noget med det. I så fald kan du først analysere din streng, som:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');
Det giver dig en komplet DOM, så du bliver nødt til at rykke det barn, du tilføjede, ud. Forudsat at det kun har et overordnet element, det er som ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;
Nu kan du rode med det new_element
efter behov, antager jeg, før du gør hvad du skal gøre med det.
Det er dog lidt mere ligetil at gøre dette:
let new_element = document.createRange() .createContextualFragment(string_of_html);
Du får elementet direkte som et dokumentfragment, der skal tilføjes, eller hvad som helst efter behov. Denne metode er bemærkelsesværdig ved, at den faktisk udfører den, den finder inde, hvilket kan være både nyttigt og farligt.
Der er en betydelig nuance ved alt dette. For eksempel skal HTML være gyldig. Misformet HTML fungerer bare ikke. Misdannet kan også overraske dig, som at sætte en i en
Koen Schaft skriver "Opret en DOM-node fra en HTML-streng", der dækker det, vi har her, men mere detaljeret og med flere af gotchas.
mislykkes, fordi den mangler a. #####