Is there a shorthand way to document.createElement multiple elements?

Is there a shorthand method in JS to document.createElement when you're creating a bunch of elements.

To maximize usage of HTML5, and still make sites work in older browsers, I tend to have something like this snippet of JS in every site I do:

// Allows HTML5 tags to work in older browsers
d开发者_JS百科ocument.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');

Is there a way to add them via one statement -- comma separated or something similar?

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

I know you didn't ask for it, but jQuery makes this pretty easy.

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

Basically what I've just done is created 6 dom elements and returned them into a jQuery object (which is similar to a node list I suppose). Then I can act on those items however I choose, or even loop through them:

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

Of course, don't forget to actually add them to the document

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

See also templates for not so ugly dom generation and built in tools.

There should really be a cleaner approach for this, at the moment I am using a simple :

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

It would actually be nicer if ES gave a shorthand for this... maybe something in the likes off...

var div = new Div( setup... );

Using Object.assign() is quite efficient to avoid repetition, easy to read.

document.body.appendChild(
  Object.assign(
    document.createElement("div"),
    {
      style: "color:blue;font-size:2rem",
      textContent: "Multiple attributes assigned!"
    }
  )
)

// In one line 
document.body.appendChild(Object.assign(document.createElement("a"), {href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign", style: "font-size:1rem", textContent: "Object.assign() on MDN"}))

This is an old question but a good one. For modern browsers you can use innerHTML property to create multiple elements from a string and it is faster than creating elements one by one:

const el = document.querySelector('#app');

el.innerHTML = `
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
`;

We can create the string from an array:

const el = document.querySelector('#app');
const els = ['header', 'nav', 'section', 'article', 'aside', 'footer'];
el.innerHTML = els.reduce((acc, curr) => acc + `<${curr}>${curr}</${curr}>`, '');