vanilla javascriptを使用してes6テンプレート文字列をhtml要素に変換します。

Question

htmlテンプレート文字列をHTML要素に変換するために、プレーンな古いバニラのjavascript（sansフレームワーク）を使用する方法はありますか？

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); 
} 

この実装は動作しますが、それはinnerHTMLプロパティを使用して、DIVを包み、余分なを追加します。ここでは

は私が試したものをしたものです。余分なものなしでそれを行う方法がdiv？

Answer 1

あなたはinsertAdjacentHTMLを使用することができます。

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>

テンプレート文字列である変数のようなものがないので、私は、変数templateStringその文字列を呼び出すことはありません。テンプレート文字列はリテラルの表記法ですが、評価すると平易な文字列です。変数には "templateness"という魔法のような痕跡があります。

Answer 2

私はちょうどDomParserを発見しました。

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

クレジット：https://davidwalsh.name/convert-html-stings-dom-nodes