Javascript 文档createElement最短语法

我正在寻找最短的语法，它可以为我提供与此dojo行相同的结果：

var divblock5 = dojo.create("div", {className: "barlittle", id: "block5"});

但是我想使用普通JavaScript而不是dojo框架。我有很多动态元素创建，我想让我的代码尽可能简短

var create = function(element, properties) {
    var elmt = document.createElement(element);
    for (var prop in properties) {
        elmt[prop] = properties[prop];
    }
    return elmt;
}

create("div", {className: "barlittle", id: "block5"});

或者，我个人的最爱，它简单地接受HTML并将其转换为DOM节点：

var elmtify(html) {
    var wrapper = document.createElement('div');
    wrapper.innerHTML = html;
    return wrapper.firstChild;
}

elmtify('<div class="barlittle" id="block5"></div>');

var-elmtify（html）{
var wrapper=document.createElement（'div'）；
wrapper.innerHTML=html；
返回wrapper.firstChild；
}
elmtify（“”）；

或者，我个人的最爱，它简单地接受HTML并将其转换为DOM节点：

var elmtify(html) {
    var wrapper = document.createElement('div');
    wrapper.innerHTML = html;
    return wrapper.firstChild;
}

elmtify('<div class="barlittle" id="block5"></div>');

var-elmtify（html）{
var wrapper=document.createElement（'div'）；
wrapper.innerHTML=html；
返回wrapper.firstChild；
}
elmtify（“”）；

您应该选中put选择器：

您应该选中put选择器：

由于这似乎仍然是一个悬而未决的问题，我添加了我的方法，这与Tom所说的几乎相同，但我的方法考虑了样式信息：

function createElement(tag, attrs) {
  if(!tag) throw new SyntaxError("'tag' not defined"); // In case you forget

  var ele = document.createElement(tag), attrName, styleName;
  if(attrs) for(attrName in attrs) {
    if(attrName === "style")
      for(styleName in attrs.style) {ele.style[styleName] = attrs.style[styleName];}
    else
      ele[attrName] = attrs[attrName];
  }
  return ele;
}

因此，如果您通常在没有任何库的情况下编写：

var divBlock5 = document.createElement("div");
divBlock5.className = "barlittle";
divBlock5.id = "block5";

使用Tom提供的代码片段，您只需编写：

var divBlock5 = createElement("div", {className:"barlittle", id:"block5"});

但是，假设您希望向元素添加独立样式。然后，加上我的话，你写：

var divBlock5 = createElement("div", {className:"barlittle", id:"block5", style:{color:"#08A", fontWeight:"bold"}});

---

希望这有帮助。干杯

由于这似乎仍然是一个悬而未决的问题，我添加了我的方法，这与Tom所说的几乎相同，但我的方法考虑了样式信息：

function createElement(tag, attrs) {
  if(!tag) throw new SyntaxError("'tag' not defined"); // In case you forget

  var ele = document.createElement(tag), attrName, styleName;
  if(attrs) for(attrName in attrs) {
    if(attrName === "style")
      for(styleName in attrs.style) {ele.style[styleName] = attrs.style[styleName];}
    else
      ele[attrName] = attrs[attrName];
  }
  return ele;
}

function createElement(tag, attrs, html) {
    if (!tag) throw new SyntaxError("'tag' not defined"); // In case you forget

    var ele = document.createElement(tag),
        attrName, styleName;
    if (attrs)
        for (attrName in attrs) {
            if (attrName === "style")
                for (styleName in attrs.style) { ele.style[styleName] = attrs.style[styleName]; }
            else if (attrs[attrName])
                ele.setAttribute(attrName, attrs[attrName]);
        }
    if (html)
        ele.innerHTML = html;
    return ele;
}

因此，如果您通常在没有任何库的情况下编写：

var divBlock5 = document.createElement("div");
divBlock5.className = "barlittle";
divBlock5.id = "block5";

使用Tom提供的代码片段，您只需编写：

var divBlock5 = createElement("div", {className:"barlittle", id:"block5"});

但是，假设您希望向元素添加独立样式。然后，加上我的话，你写：

var divBlock5 = createElement("div", {className:"barlittle", id:"block5", style:{color:"#08A", fontWeight:"bold"}});

希望这有帮助。干杯

function createElement(tag, attrs, html) {
    if (!tag) throw new SyntaxError("'tag' not defined"); // In case you forget

    var ele = document.createElement(tag),
        attrName, styleName;
    if (attrs)
        for (attrName in attrs) {
            if (attrName === "style")
                for (styleName in attrs.style) { ele.style[styleName] = attrs.style[styleName]; }
            else if (attrs[attrName])
                ele.setAttribute(attrName, attrs[attrName]);
        }
    if (html)
        ele.innerHTML = html;
    return ele;
}

这个解决方案建立在Tom和Xch3l建议的基础上，但它增加了对传递要应用于DOM元素的自定义属性的支持。对于任何给定的DOM元素，哪些属性作为属性存在取决于DOM元素的类型，因此使用元素的

setAttribute

方法是一个更健壮的解决方案

请注意，您需要传递一个“class”属性而不是“className”，并且该解决方案还添加了对可选HTML字符串的支持，该字符串可以作为第三个参数传递

以下是如何使用该函数的示例：

var divBlock5 = createElement("div", {class:"barlittle", "data-my-custom-attribute":"lorem ipsum", id:"block5", style:{color:"#08A", fontWeight:"bold"}},`<h5>An Optional String of HTML to be Inserted Inside the Newly Created Element</h5><p>Preserve Line Spacing by Using Backticks Instead of Quotes</p>`);

var divBlock5=createElement（“div”，{class:“barlittle”，“data my custom attribute”：“lorem ipsum”，id:“block5”，style:{color:#08A”，fontwweight:“bold”}，`要插入新创建的元素中的可选HTML字符串通过使用反勾而不是引号来保留行距
`）；

这个解决方案建立在Tom和Xch3l建议的基础上，但它增加了对传递要应用于DOM元素的自定义属性的支持。对于任何给定的DOM元素，哪些属性作为属性存在取决于DOM元素的类型，因此使用元素的

setAttribute

方法是一个更健壮的解决方案

请注意，您需要传递一个“class”属性而不是“className”，并且该解决方案还添加了对可选HTML字符串的支持，该字符串可以作为第三个参数传递

以下是如何使用该函数的示例：

var divBlock5 = createElement("div", {class:"barlittle", "data-my-custom-attribute":"lorem ipsum", id:"block5", style:{color:"#08A", fontWeight:"bold"}},`<h5>An Optional String of HTML to be Inserted Inside the Newly Created Element</h5><p>Preserve Line Spacing by Using Backticks Instead of Quotes</p>`);

var divBlock5=createElement（“div”，{class:“barlittle”，“data my custom attribute”：“lorem ipsum”，id:“block5”，style:{color:#08A”，fontwweight:“bold”}，`要插入新创建的元素中的可选HTML字符串通过使用反勾而不是引号来保留行距
`）；

创建一个执行相同操作的函数。创建一个元素，应用属性遍历对象，最后返回元素。看起来很简单。您需要编写一些包装器，其代码中的包装器与相应的dojo代码几乎相同。请阅读。创建一个执行相同操作的函数。创建一个元素，应用属性遍历对象，最后返回元素。看起来很简单。您需要编写一些包装器，其代码中的包装器与相应的dojo代码几乎相同。请阅读。