如何从模板创建DOM元素

How to create a DOM element from a template?

本文关键字：创建 DOM 元素      更新时间：2023-09-26

假设我有一个模板保存在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中的模板开始。

这是最好的方法吗?

看起来很长，所以我只是想验证一下。

如果你已经在使用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/

如果您正在使用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);
相关文章：