使用对象文字创建具有属性的元素

$("<div />",
{
    id: "test",
    name: "test",
    class: "test-class",
    css: {
        width: "100px",
        height: "100px",
        backgroundColor: "#fff"
    }
});

从 documentation

此外,可以传入任何事件类型,并可以调用以下jQuery方法:val, 、html、文本、数据、宽度、高度或偏移量。

另一个解决方案(在一个单独的答案中,可以分别投票给我的解决方案中的任何一个)是只需给 .css() 之后:

$('<div>',
{
    id: 'test',
    name: 'test',
    class: 'test-class'
}).css(
{
    width: '100px',
    height: '100px',
    backgroundColor: '#fff'
});

而不是 style 使用 css ,如下所示:

$("<div />", {
    id: "test",
    name: "test",
    "class": "test-class", //patrick's right, IE specifically doesn't like class
    css: {
        width: "100px",
        height: "100px",
        "background-color": "#fff"
    }
});

You can give it a try here background-color (因为它有破折号)需要加引号,或者 backgroundColor . 其他特殊属性是这样映射的, val , css格式 , html , text , data , width , height 和 offset are treated special here .

$('<div>',
{
    id: 'test',
    name: 'test',
    class: 'test-class',
    style: $.objectToCss(
    {
        width: '100px',
        height: '100px',
        background-color: '#fff'
    })
}

安 完全未经测试 此类助手方法的版本可能如下所示:

$.objectToCss = function(obj) {
    var css;
    $.each(obj, function(name, value) {
        css += name + ': ' + value + ';';
    });
    return css;
};