jQuery使用`data` HTML属性创建一个新元素

前言

问题是关于使用HTML数据属性创建HTML元素,例如< object data =“foo”>< / object>.

问题

几分钟前我偶然发现了这个问题.如果我写

$('<div>',{id:"foo",'class':"bar" });
// <div id="foo" class="bar"></div>

然而

$('<object>',data:"some+data+String" });
// [ <object id="foo"></object> ]

我期望输出的地方

// [ <object id="foo" data="some+data+String"></object> ]

我知道.data.我的问题是

$('<object>',data:"some+data+String" }).data();
// Object {}
$('<object>','data-foo':"some+data+String" }).data();
// Object {foo:"some+data+String"}

那么……为什么不创建HTML属性数据,因为它不是data-xxxx属性名,因此不会创建任何实际数据？

更新

我将再次重申这个问题的内容.

[…]如果我写

$('<div>',data:"some+data+String" });
// [ <object id="foo"></object> ]

我期望输出的地方

// [ <object id="foo" data="some+data+String"></object> ]

……再一次,我知道.data.

为什么不$(‘< div>‘,{data：’foo’})创建< div data =“foo”>< / div>,或者换句话说,为什么它完全忽略该属性什么时候创建元素？

编辑

对于所有那些认为数据不是有效的HTML属性的人,好吧,it is.

更新

截至今天,我用于此用例的解决方案是

$('<div>',{
  attr: {
    data: 'foo'
  }
});

$('<div />',{ 
    id      : "foo",'class' : "bar",text    : "test",// jQuery text() is called,html    : '<span></span>',// jQuery html() is called,css     : {                // jQuery css() is called,color: 'red'
    },on : {                     // calls jQuery's .on('click' ...
        click: function() {
             alert
        }
    }
});

$('<object />',{data : 'somedata'});

$('<object>',{ id:"foo",'Data' : "some+data+String" });
$('<object>','daTa' : "some+data+String" });

<object id="foo" data="some+data+String"></object>