如何从模板创建DOM元素？

Question

假设我有一个保存在HTML中并使用标准下划线语法的模板。

我的理解是，我可以使用jQuery这样抓模板：

var html = $('#item-foo').html()

从那里我可以使用

var interpolated = _.template(html, {prop: "and_values"});

要在JavaScript中创建DOM元素，我可以使用此实用程序功能

// converts HTML string to DOM object
Pub.HTMLToElement = function (html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    return div.firstChild;
};

var element = HTMLToElement(interpolated);

最后，我在JavaScript中有了元素，这些元素都以HTML中的模板开头。

这是最好的方法吗？

似乎很长，所以我只想验证。

Answer 1

这有点简单，您已经在使用jQuery：

HTML：

<script id="template" type="text/template">
Hello <%=name%>, how are you?
</script>
<div id="container" />

JS：

var str=$('#template').html();
var interpolated = _.template(str, {name: "pizza"});
$('#container').append($('<div/>').html(interpolated));

JSFiddle： http : //jsfiddle.net/QAT4n/

Answer 2

如果您使用的是jQuery，则jQuery会自动将HTML转换为元素。 这是一种较短的方法：

var element = $(interpolated).get(0);

参见http://api.jquery.com/get/和http://api.jquery.com/jQuery/#jQuery2

---

所以整个过程是这样的：

var html = $('#item-foo').html()
var interpolated = _.template(html, {prop: "and_values"});
var element = $(interpolated).get(0);

并可以清理为此：

var interpolated = _.template(
        $('#item-foo').html()
        , {
            prop: "and_values"
        });
var element = $(interpolated).get(0);