Есть ли сокращенный способ для document.createElement нескольких элементов?

Question

Существует ли сокращенный метод в JS для 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');

Есть ли способдобавить их одним утверждением - через запятую или что-то подобное?

Answer 1

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

Answer 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 );

См. Также шаблонов , чтобы узнать о не столь уродливой генерации и встроенных инструментах.

Answer 3

Должен быть действительно более понятный подход для этого, на данный момент я использую простое:

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... );