使用 vanilla javascript 将 es6 模板字符串转换为 html 元素答案

【问题标题】：Convert a es6 template string to html element using vanilla javascript使用 vanilla javascript 将 es6 模板字符串转换为 html 元素
【发布时间】：2017-07-11 09:03:31
【问题描述】：

有没有一种方法可以使用普通的旧 vanilla 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，有没有办法做到这一点？

【问题讨论】：

你为什么不直接 .appendChild(templateString) 并删除“测试”引用
或者只做const test = document.createElement('div'); test.innerHTML = prop.text; 不需要字符串插值...
你确定prop.text允许包含任意html吗？
相关 - stackoverflow.com/q/494143/104380

标签： javascript html ecmascript-6

【解决方案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 }

&lt;h1&gt;test&lt;/h1&gt;

我不会称该字符串变量为 templateString，因为不存在作为模板字符串的变量。模板字符串是文字符号，但在评估时，它们是纯字符串。变量中没有任何东西具有某种神奇的“模板性”痕迹。

【讨论】：

【解决方案2】：

我刚刚发现DomParser。这就是我一直在寻找的：

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

信用：https://davidwalsh.name/convert-html-stings-dom-nodes

【讨论】：