添加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()时读取属性?

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

Answer 1

当您不能使用data函数时，这些属性是有用的:

• 当生成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'}}));