有没有一种方法可以使用普通的旧香草
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,因为没有变量是模板字符串.模板字符串是文字表示法,但在评估时,它们是纯字符串.变量中没有任何东西具有一些神奇的“模板性”痕迹.
