Javascript 添加jQuery.data（）与向元素添加数据xxx属性

因此，您可以通过附加html将其添加到文档中

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

我的问题是这些方法中哪一种更可取

我使用数据属性来表示速度，目前使用的是前一个示例（.append（））。它很好用

但是，当我动态更改此元素的数据时，如下所示：

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

它更改存储在内存中的元素数据，但不更新属性。本例中的属性将保留为“data letter=“A”。同样，在幕后一切都很好，当我调用$（this.data（'letter'）时，我得到了字母“U”。但这让我质疑是否应该避免使用数据属性。附加属性时是否读取一次，然后上载到内存中，然后将属性保留为死区。或者在找不到.data（）时读取属性

---

我担心是否是后者，因为这不会提供最佳的速度性能。我希望在附加元素时确保所有内容都已上载到内存中。

当您无法使用

数据

功能时，属性非常有用：

• 在生成HTML服务器端时
• 一次生成大量HTML时

在其他情况下，没有理由选择以HTML字符串的属性传递数据：它只需要更多的解析

请注意，您使用jQuery的方式有些冗长。你可以减少

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

到

$（'#game'）。追加（$（''，{data:{letter:'A'}））；

第一次读取属性。在元素上使用data（）。至于哪一个更受欢迎，我不认为真的有一个通用的“受欢迎”的方式。我喜欢这样。如果您有“A”-数据是否会准确地传递到父标记上（与所有元素或仅子元素相反）？我不理解您在评论中的问题。你想要一个关于如何构建这个HTML并将其放在游戏div中的示例（可能不那么优雅）？我的元素在附加它们时会有子元素。父div上有四个数据属性。我只是想知道是否附加了$（“#game”）.append($（“”，如果数据仅应用于div或同时应用于span div。数据仅附加到目标元素，不会传播。非常感谢您的帮助。我将把这个问题标记为答案，假设下一位没有人来证明不是这样。干杯！

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

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