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

Question

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

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，因为不存在作为模板字符串的变量。模板字符串是文字符号，但在求值时，它们是纯字符串。变量中没有任何东西具有某种神奇的“模板性”痕迹。