Question

我知道我可以创建一个元素，例如：

var foo = document.createElement('div');

并设置div id我会这样做：

foo.setAttribute('id', 'divName');

如果你谷歌足够长，你会发现有人在做代码，比如这里

var google = createElement("a",{"href":"http://google.com"},"google"),
    youtube = createElement("a",{"href":"http://youtube.com"},"youtube"),
    facebook = createElement("a",{"href":"http://facebook.com"},"facebook"),
    links_conteiner = createElement("div",{"id":"links"},[google,youtube,facebook]);

等于：

var foo = document.createElement('div', {'id':'divName);

但是当我运行上面的代码时，不会添加id或divName，而是创建一个空div。所以我很好奇我做错了什么，如果甚至可以使用.createElement创建和设置元素的div名称？

Answer 1

好吧，你可以创建自己的原型来为你做。不是最好的解决方案，但会让您能够在一行中创建元素并为其添加属性：

document.__proto__.customCreateElement = function(tag, attributes){
    var e = document.createElement(tag);

    for(var a in attributes) e.setAttribute(a, attributes[a]);

    return e;
}

然后：

var a = document.customCreateElement('div', {id: "myId", name: "myName"});

结果：

<div id="myId" name="myName"></div>

当然，如果你想在没有任何框架或库的情况下使用纯JavaScript。

Answer 2

如果您可以使用jQuery，则可以根据doc：

进行编写

$('<div/>', {id: 'divName'})

＆＃13;

var ele = $('<div/>', {id: 'divName'});

console.log(ele.get(0).outerHTML);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

如果要在一行中添加对象，则可以使用：

Object.assign((document.createElement('div'),{id:"fd"})

它在起作用：

document.body.appendchild(Object.assign((document.createElement('div'),{textContent:"fd"}));

不需要jquery。

Answer 4

根据spec，createElement接受第二个option对象，该对象只能具有is属性。不幸的是，id，class style都没有。另请参阅MDN docs

Answer 5

＆＃13;

    var createElement = function (tagName, id, attrs, events) {
      attrs = Object.assign(attrs || {}, { id: id });
      events = Object.assign(events || {});
      
      var el = document.createElement(tagName);
      Object.keys(attrs).forEach((key) => {
        if (attrs [key] !== undefined) {
          el.setAttribute(key, attrs [key]);
        }
      });
      
      Object.keys(events).forEach((key) => {
        if (typeof events [key] === 'function') {
          el.addEventListener(key, events [key]);
        }
      });

      return el;
    }

    createElement('div');

＆＃13;

如何在一行中使用id创建元素

5 个答案: