Question

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

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

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

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

Answer 2

由于这似乎仍然是一个悬而未决的问题，我添加了我的方法，这与汤姆说的差不多，但我的方法考虑了样式信息：

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

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

Answer 3

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

Answer 4

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

Answer 5

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

    return element;
}

document createElement最短语法

5 个答案: