有没有一种速记的方法来记录.createElement多个元素

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

本文关键字：记录 方法 createElement 元素 一种 有没有      更新时间：2023-09-26

在JS中是否有一个速记方法来记录。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');

是否有一种方法可以通过一个语句添加它们——逗号分隔或类似的东西?

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

我知道您没有要求这样做，但是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生成和内置工具。

应该有一个更简洁的方法，目前我使用一个简单的:

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

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

这是一个老问题，但却是一个好问题。对于现代浏览器，你可以使用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}>`, '');
相关文章：