Konvertieren Sie eine Es6 Vorlage Zeichenfolge in HTML-Element mit Hilfe von Vanille Javascript

Question

Gibt es eine Methode zu verwenden plain alten Vanille Javascript (Sans Frameworks), um eine HTML-Vorlage Zeichenfolge in ein Html-Element zu konvertieren?

Hier ist, was ich die Dinge haben, die ich versucht habe:

function renderBody(selector = body, template) { 
    const prop.text = 'foobar'; 
    const templateString = `<div id='test'>${prop.text}</div>` 
    const test = document.createElement('div'); 
    test.innerHTML = templateString; 
    document.querySelector(selector).appendChild(test); 
} 

Diese Implementierung funktioniert, aber es nutzt innerHTML- und fügt ein zusätzliches gewickelt div. Gibt es einen Weg, das ohne die extra div zu tun?

Answer 1

können Sie insertAdjacentHTML verwenden:

function renderBody(selector = 'body', template) { 
 
    const prop = { text: 'foobar' }; 
 
    const html = `<div id='test'>${prop.text}</div>`; 
 
    document.querySelector(selector).insertAdjacentHTML('beforeend', html); 
 
} 
 

 
renderBody();

div { border: 1px solid }

<h1>test</h1>

Ich würde diese Zeichenfolge Variable nicht nennen templateString, da es keine als Variable so etwas ist, dass ein Template-String ist. Template-Strings sind eine literale Notation, aber wenn sie ausgewertet werden, sind sie einfache Strings. Es gibt nichts in der Variable, das eine magische Spur von "Schablonenhaftigkeit" hat.

Answer 2

Ich habe gerade DomParser entdeckt. Und das ist, was ich suchte:

let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html'); 

Credit: https://davidwalsh.name/convert-html-stings-dom-nodes