0

So you can add your html to your document by appending it. 

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

or you could:

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

My question is which of these methods is preferable.

I am using data attributes for speed and currently I am using the former example (.append()). It works fine.

However when I dynamically change the data for this element like such:

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

it changes the data stored in memory for the element, but it does not update the attribute. The attribute in this example would stay as 'data-letter="A"'. Again everything works great behind the scenes and when I call $(this).data('letter') I get the letter 'U'. But it got me questioning whether I should avoid data attributes. Are the attributes read once when they are appended, then uploaded into memory and the attributes are than left for dead. Or are the attributes read when no .data() is found?

I am concerned whether it is the latter because that would not provide optimal speed performance. I want to make sure everything is uploaded into memory when I append the element.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jonathan Tonge
  • 1,520
  • 19
  • 25
  • 2
    The attributes are read the first time .data() is used on the element. As far as which one is preferred, i don't think there really is a general "preferred" way of doing it. – Kevin B Mar 19 '13 at 15:20

1 Answers1

2

The attributes are useful when you can't use the data function :

  • when generating the HTML server side
  • when generating a big bunch of HTML in one go

In other cases, there is no reason to prefer passing the data as attribute in HTML string : it only requires more parsing.

Note that you're using jQuery in a somewhat verbose way. You could reduce

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

to 

$('#game').append($('<div>', {data: {letter:'A'}}));
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • I like that. What if you had '
    A
    ' - would the data be passed accurately on the parent tag (as opposed all elements or child elements only)?     – Jonathan Tonge Mar 19 '13 at 15:27
  • I don't understand your question in comment. You want an example on how to build this HTML and put it in your game div (it might be less elegant) ? – Denys Séguret Mar 19 '13 at 15:32
  • My elements have children when I am appending them. There is four data attributes on the parent div. I was just curious if I appended $('#game').append($('
    ', if the data would be applied to just the div or also the span div as well.     – Jonathan Tonge Mar 19 '13 at 15:35
  • The data are only appended to the element you target, there is no propagation. – Denys Séguret Mar 19 '13 at 15:36
  • Great thank you for your help dystroy. I will mark this question as the answer assuming noone comes along in the next bit to prove otherwise. Cheers! – Jonathan Tonge Mar 19 '13 at 15:37