如何在一行中创建带有 id 的元素

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 名称？

原文由 Zach Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Marcin Malinowski 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想在一行中添加一个对象，你可以使用：

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

这是在行动：

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

不需要 jquery。

原文由 merlin 发布，翻译遵循 CC BY-SA 4.0 许可协议