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

另见templates没有那么难看的dom生成和内置工具。

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

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

是否有document.createElement多个元素的简写方法？

4 个答案: