1

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

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

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

4

5 回答 5

11 
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>');
于 2013-01-28T15:14:51.350 回答
1

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

希望这可以帮助。干杯!

于 2014-03-31T03:34:36.283 回答
0

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

于 2013-01-28T19:03:15.847 回答
0 
createElement = function(type, className, id) {
    var element = document.createElement(type);
    element.className = className;
    element.id = id;

    return element;
}
于 2013-01-28T15:16:05.473 回答
0 
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>`);
于 2018-11-28T08:31:41.040 回答