使用vanilla javascript將es6模板字符串轉換為html元素

Question

有沒有一種方法可以使用普通的舊版香草javascript（無框架）將html模板字符串轉換為Html元素？

這就是我嘗試過的事情：

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，因為沒有變量是模板字符串。 模板字符串是文字表示法，但在評估時，它們是純字符串。 變量中沒有任何東西具有一些神奇的“模板性”痕跡。

Answer 2

我剛剛發現了DomParser 。 這就是我在尋找的東西：

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

圖片來源： https ： //davidwalsh.name/convert-html-stings-dom-nodes