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

Posted 2023-02-22

【中文标题】使用 vanilla javascript 将 es6 模板字符串转换为 html 元素

【英文标题】：Convert a es6 template string to html element using vanilla javascript

【发布时间】：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吗？

相关 - ***.com/q/494143/104380

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

【参考方案2】：

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

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

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