javascript - 如何构建 HTML 模板并添加到 DOM？

Question

我知道我们可以使用：

var ele = "<div></div>";
$('body').append(ele);

然而，这不像普通的 HTML 那样灵活，因为所有的 HTML 都被引用了......

我看到了 jQuery-templ，以便我们可以使用：

<script id='tmpl' type='text/html'>
    <div>test</div>
</script>
<script>
    $.tmpl('#tmpl').appendTo('body');
</script>

这很好，但是这个项目不再继续了（虽然这很有用！）

有没有类似的东西？

Answer 1

你想要一些东西模板引擎。那么这里是列表。

1. 淘汰赛 JS 淘汰赛JS
2. 句柄栏 句柄栏 JS
3. 小胡子小胡子

或者，您也可以根据自己的要求选择自己的模板引擎。模板选择器 ，甚至来自此链接模板选择器

Answer 2

非常轻量级的下划线库具有模板功能。这也允许您使用 erb 样式<% %>来内联 javascript 代码。

John Resig（jQuery 创建者）还编写了一个微型模板函数，您可以将其放入代码中而无需调用库。

Answer 3

您也可以在不使用任何库（纯 JS）的情况下执行此操作（演示）

var list = [
        'item1',
        'item2',
        'item3'
    ],
    tmpl = '<li>{item}</li>',
    i, t = '';

for (i = 0; i < list.length; i++) {
    t += tmpl.replace(/\{item\}/g, list[i]);
}
document.getElementById('list').innerHTML = '<ul>' + t + '</ul>';