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');

它会更改元素的内存中存储的数据，但不会更新属性。此示例中的属性将保留为＆＃39; data-letter =＆＃34; A＆＃34;＆＃39;。同样一切都在幕后工作很好，当我打电话给$（this）.data（＆＃39;字母＆＃39;）我收到了字母＆＃39; U＆＃39;。但它让我质疑我是否应该避免数据属性。这些属性在被追加时会被读取一次，然后被上传到内存中，而属性则会被遗忘。或者在没有找到.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'}}));

添加jQuery .data（）与向元素添加data-xxx属性

1 个答案: