如何构建 HTML 模板并添加到 DOM？答案

【问题标题】：How to construct HTML template and add to DOM?如何构建 HTML 模板并添加到 DOM？
【发布时间】：2013-02-15 04:42:40
【问题描述】：

我知道我们可以使用：

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>

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

有类似的吗？

【问题讨论】：

我有一个问题，为什么这种类型的代码不像纯html那样灵活？ var ele = "<div></div>"; $('body').append(ele);
@Sarfaraz 因为模板 div 可能很长，并且引号必须连续多行。有时你有 "
" 所以你需要转义引号的内部级别..
你不想使用 type="text/html" 你应该使用 type="text/template" 然后使用 $('#tmpl').html()
<script id='tmpl' type='text/html'> <div>test</div> </script> <script> $.tmpl('tmpl').appendTo('body'); </script> 这个我试过了，但是不行，请你解释一下
@Sarfaraz 它应该是“#tmpl”。我错过了一个尖锐的

标签： javascript jquery html

【解决方案1】：

非常轻量级的下划线库有一个template 函数。这也允许您使用 erb 样式 <% %> 内联 javascript 代码。

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

【讨论】：

【解决方案2】：

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

KnockOutJS KnockOut JS
处理程序栏HandleBar JS
小胡子Mustache

或者，您也可以根据自己的要求选择自己的模板引擎。 Template Chooser 甚至从这个链接Template chooser

【讨论】：

【解决方案3】：

你也可以在不使用任何库（纯 JS）的情况下做到这一点（demo）

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>';

【讨论】：