添加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'}}));