在jquery 中将数据属性添加到尚未插入DOM的元素

参见英文答案 > jQuery Data vs Attr?                                    2个
所以我基本上是在动态添加一些元素到DOM.我可以在它们存在之前使用类似.addClass的方法,并且该类与元素一起附加到DOM,但是当我使用.data()方法添加数据属性时,数据不会附加到DOM与元素.我在这里遗漏了什么或者我是否真的要等到DOM中的元素存在才能向其中添加数据？

PS.使用jquery 1.9.1

HERES A FIDDLE FOR YOU TO PLAY WITH

JS

var widget = $("<div>");
widget.addClass("banana");
widget.data('color','brown');
widget.appendTo('#container');

HTML

<div id="container">

</div>

还有一些不错的CSS,所以你知道在哪里点击检查,看到数据属性不是(或希望是)添加.

我的预期结果是

<div id="container">
    <div class="banana" data-color="brown"></div>
</div>

干杯.