文档 createElement 最短语法答案

【问题标题】：document createElement shortest syntax文档 createElement 最短语法
【发布时间】：2013-01-11 23:06:52
【问题描述】：

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

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

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

【问题讨论】：

创建一个做同样事情的函数。创建一个元素，遍历应用属性的对象，最后返回该元素。看起来很简单。
您需要编写一些包装器，其代码与相应的 dojo 代码几乎相同。
了解JsonML。

标签： javascript dojo element document createelement

【解决方案1】：

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

【讨论】：

【解决方案2】：

createElement = function(type, className, id) {
    var element = document.createElement(type);
    element.className = className;
    element.id = id;

    return element;
}

【讨论】：

【解决方案3】：

您应该检查 put-selector：https://github.com/kriszyp/put-selector。

【讨论】：

【解决方案4】：

由于这似乎仍然是一个悬而未决的问题，我正在添加我的方法，这与 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";

使用提供的 sn-p Tom，您只需编写：

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

但是假设你想为你的元素添加一个独立的样式。然后，加上我的补充，你写：

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

希望这会有所帮助。干杯！

【讨论】：

【解决方案5】：

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

【讨论】：