如何从模板创建DOM元素
How to create a DOM element from a template?
假设我有一个模板保存在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);
相关文章:
- 使用jquery创建dom元素会导致ie9出现拒绝访问错误
- 从字符串创建dom元素时添加多个类
- 如何在javascript中创建DOM元素的快照
- React-从简单对象树创建dom
- 从XML字符串创建DOM元素,如何使用.getElementsByName()
- 使用 Javascript 创建 DOM 元素
- 使用来自 JavaScript 的数据值创建 DOM 元素
- AngularJS :如何创建DOM并绑定到基于任意分层数据的模型
- 为什么当我刚刚创建 DOM 元素时它不存在
- 在 jQuery 中创建 DOM 之前的绑定事件
- JQuery 在创建 DOM 元素后执行某些操作 - DOMNodeInsert 不起作用
- 用于创建 DOM 对象的事件
- jQuery如何创建DOM元素
- 我注意到我倾向于在JavaScript / jQuery中创建DOM对象并附加它们.这是可以的还是我应该在 HTML 中
- 函数中的递归创建 DOM 树
- 用JavaScript创建DOM树的一种更简单的方法
- 在页面上,获取在创建dom期间创建的Javascript数组
- 如何使用字符串串联在JSX中创建DOM元素
- php创建DOM元素并使用ajax发送
- 动态创建DOM后,jQuery.on()方法不起作用