根据3.4的文档，首选使用带有attr()方法的属性。

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

也可以用下面的方法创建一个div元素:

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

添加类

my_div.classList.add('col-10');

也可以执行append()和appendChild()

更有表现力的方式，

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

参考:文档

一定要彻底阅读文档，因为这种符号的某些后果对检查代码的人来说并不明显。

名称“class”必须在对象中引用，因为它是JavaScript的保留字，而“className”不能使用，因为它指的是DOM属性，而不是属性。 虽然第二个参数很方便，但它的灵活性可能会导致意想不到的结果(例如$("<input>"， {size: "4"})调用.size()方法而不是设置size属性)。

根据3.4的文档，首选使用带有attr()方法的属性。

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

我个人认为代码的可读性和可编辑性比性能更重要。无论你觉得哪个更容易看，它应该是你根据上述因素选择的。 你可以写成:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

你的第一个方法是:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

但就可读性而言;jQuery方法是我的最爱。跟随这个有用的jQuery技巧、笔记和最佳实践

如果#box是空的，什么都没有，但如果不是空的，它们会做非常不同的事情。前者将添加一个div作为#box的最后一个子节点。后者将#box的内容完全替换为单个空div、文本和所有内容。