使用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