Angenommen, Sie haben HTML-Code, der eine Zeichenfolge ist:
let string_of_html = ` Cool `;Vielleicht kommt es von einer API oder Sie haben es selbst aus Vorlagenliteralen oder so etwas erstellt.
Sie können das verwenden innerHTML, um das in ein Element zu setzen, wie:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Sie haben etwas mehr Kontrolle, wenn Sie mit der insertAdjacentHTMLFunktion arbeiten, da Sie den neuen HTML-Code an vier verschiedenen Stellen platzieren können:
text inside node Du benutzt es wie ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Unter bestimmten Umständen möchten Sie das neu erstellte DOM möglicherweise noch in JavaScript haben, bevor Sie etwas damit tun. In diesem Fall können Sie zuerst Ihre Zeichenfolge analysieren, z.
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Dadurch erhalten Sie ein vollständiges DOM, sodass Sie das hinzugefügte Kind herausreißen müssen. Angenommen, es hat nur ein übergeordnetes Element, das ist wie ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Jetzt können new_elementSie nach Bedarf damit herumspielen, bevor Sie das tun, was Sie damit tun müssen.
Es ist jedoch etwas einfacher, dies zu tun:
let new_element = document.createRange() .createContextualFragment(string_of_html);Sie erhalten das Element direkt als Dokumentfragment zum Anhängen oder was auch immer nach Bedarf. Diese Methode ist insofern bemerkenswert, als sie tatsächlich s ausführt , das sie im Inneren findet, was sowohl nützlich als auch gefährlich sein kann.
All dies hat eine beträchtliche Nuance. Zum Beispiel muss der HTML-Code gültig sein. Fehlgebildetes HTML wird einfach nicht funktionieren. Missgebildet könnte Sie auch überraschen, wie das Einsetzen eines in ein
Koen Schaft schreibt "Erstellen Sie einen DOM-Knoten aus einer HTML-Zeichenfolge", der das, was wir hier haben, ausführlicher und mit mehr Fallstricken behandelt.
wird scheitern, weil es fehlt a. #####