添加jQuery .data（）与添加data-xxx属性到你的元素

Question

所以你可以添加你的html到你的文档后面。

$game.append('<div data-letter="A">A</div>'); 

，或者你可以：

var game = document.getElementById('game'); 
var div = document.createElement('div'); 
$(div).data('letter', 'A'); 
game.appendChild(div); 

我的问题是这些方法是优选的。

我正在使用数据属性的速度，目前我使用前面的例子（.append（））。它工作正常。

然而，当我动态改变数据对于像这样该元素：

$(this).data('letter', 'U'); 

它改变存储在存储器中该元素的数据，但它不更新属性。这个例子中的属性将保留为'data-letter =“A”'。再次，一切都很好，在幕后，当我打电话给$（this）.data（'letter'）时，我得到字母'U'。但它让我质疑我是否应该避免数据属性。这些属性在被追加时读取一次，然后上传到内存中，并且这些属性比被遗弃的时候还要多。或者当找不到.data（）时读取属性？

我担心它是否是后者，因为它不会提供最佳的速度性能。当我添加元素时，我想确保将所有内容上传到内存中。当你无法使用data功能

Answer 1

的属性是有用的：在一个产生一大束HTML时产生的HTML服务器端

时

• 去

在在其他情况下，没有理由更喜欢将数据作为HTML字符串中的属性传递：它只需要更多的解析。

请注意，您正在以某种冗长的方式使用jQuery。

var game = document.getElementById('game'); 
var div = document.createElement('div'); 
$(div).data('letter', 'A'); 
game.appendChild(div); 

到

$('#game').append($('<div>', {data: {letter:'A'}}));