javascript - 添加 jQuery .data() 与向元素添加 data-xxx 属性

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 10 年前。

因此，您可以通过附加 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'}}));