[英]Convert a es6 template string to html element using vanilla javascript
有没有一种方法可以使用普通的旧版香草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
,还有办法吗?
你可以使用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,因为没有变量是模板字符串。 模板字符串是文字表示法,但在评估时,它们是纯字符串。 变量中没有任何东西具有一些神奇的“模板性”痕迹。
我刚刚发现了DomParser
。 这就是我在寻找的东西:
let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');
图片来源: https : //davidwalsh.name/convert-html-stings-dom-nodes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.