Stel dat je HTML hebt die een tekenreeks is:
let string_of_html = ` Cool `;Misschien komt het van een API of heb je het zelf geconstrueerd op basis van letterlijke sjablonen of zoiets.
Je kunt dat gebruiken innerHTMLom dat in een element te plaatsen, zoals:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Je hebt wat meer controle als je voor de insertAdjacentHTMLfunctie gaat, omdat je de nieuwe HTML op vier verschillende plaatsen kunt plaatsen:
text inside node Je gebruikt het als ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Er zijn omstandigheden waarin u de zojuist gemaakte DOM nog in JavaScript wilt hebben voordat u er iets mee doet. In dat geval kunt u uw string eerst ontleden, zoals:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Dat geeft je een volledige DOM, dus je moet dan het toegevoegde kind eruit halen. Ervan uitgaande dat het slechts één bovenliggend element heeft, is dat zoiets als ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Nu kun je daar new_elementwaar nodig mee rotzooien, denk ik voordat je doet wat je ermee moet doen.
Het is echter een beetje eenvoudiger om dit te doen:
let new_element = document.createRange() .createContextualFragment(string_of_html);U krijgt het element direct als een documentfragment om toe te voegen of wat dan ook, indien nodig. Deze methode is opmerkelijk omdat het daadwerkelijk s zal uitvoeren die het binnen vindt, wat zowel nuttig als gevaarlijk kan zijn.
Dit alles heeft een aanzienlijke nuance. De HTML moet bijvoorbeeld geldig zijn. Verkeerd opgemaakte HTML zal gewoon niet werken. Een onjuiste indeling kan u ook verrassen, zoals het plaatsen van een in een
Koen Schaft schrijft "Maak een DOM-knooppunt van een HTML-string" die omvat wat we hier hebben, maar in meer detail en met meer valstrikken.
zal mislukken omdat er een ontbreekt.