有没有一种简便的方式来创建多个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');

有没有一种方法可以通过一个语句添加它们 - 逗号分隔或类似的东西？

- Keefer

Answer 1

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

- Quentin

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

请参阅模板，以生成更美观的DOM并使用内置工具。

- Kevin Peno

Answer 3

使用Object.assign()非常高效，可以避免重复，并且易于阅读。

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"}))

- NVRM

Answer 4

对于这个问题，实际上应该有更简洁的解决方案。目前我正在使用一个简单的：

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

- user4602228

Answer 5

这是一个老问题，但是很好。对于现代浏览器，您可以使用 innerHTML 属性从字符串中创建多个元素，它比逐个创建元素更快：

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

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

我们可以从数组创建字符串：

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

- snnsnn