2011-04-25 172 views
3

当您创建一组元素时,是否存在JS中的简写方法document.createElement。有没有一种简单的方法来document.createElement多个元素?

为了最大限度地提高HTML5的使用,而且还使网站在旧的浏览器,我倾向于有一些像每个站点的这个片段JS的我做的:

// Allows HTML5 tags to work in older browsers 
document.createElement('header'); 
document.createElement('nav'); 
document.createElement('section'); 
document.createElement('article'); 
document.createElement('aside'); 
document.createElement('footer'); 

有没有办法通过将它们加入到一个语句 - 逗号分隔或类似的东西?

回答

12
var elements = ['header', 'nav', 'section', 'article', 'aside', 'footer']; 
for (var i = 0; i < elements.length; i++) { 
    document.createElement(elements[i]); 
} 
2

我知道你没有要求它,但jQuery使这很容易。

var $elems = $("<header/><nav/><section/><article/><aside/><footer/>"); 
$("header", $elems).html("Sweeeeet!"); 
// etc... 

基本上我刚刚做了创建6个DOM元素并返回他们到一个jQuery对象(类似于一个节点列表,我想)。然后,我可以对这些项目采取行动,但是我选择,甚至遍历它们:

$elems.each(function(){ /* Loopy stuff */ }); 

当然,不要忘了其实它们添加到

$("body").append($elems); 

查看文档也templates不如此丑陋的dom世代和内置工具。

0

应该真的是这样的清洁方法,目前我使用的是简单的:

function elem(type, klass, content){ 
    var el = document.createElement(type); 
    if(klass) el.className = klass; 
    if(content) el.innerHTML = content; 
    return el; 
} 

// usage : var div = elem('div','myclass','123'); 

它实际上会更好,如果ES给了这个简写...... 或许真的在喜欢...

var div = new Div(setup...); 
相关问题