Injecting HTML5 data attributes vs. Injecting javascript data structure

Question

I am curious as to which of the following is better practice (and why):

1. Injecting data as HTML 5 data attributes:

    <div class="someDiv" data-for-popup="someData"></div> 

2. Injecting a <script> into the file with some data structure

    <script> var myMap = new Map(); myMap.set('someKey','someValue'); </script> 

In both cases, I would be using javascript/jQuery to look up the value, but which is the better solution?

A little background: I am creating a static page (no communication back and forth with the server besides servicing the page) so I can't use AJAX or any other server communication to service the data. The data being injected is used for a popup that is displayed on the page when "more information" is requested for a certain page object. In other words, I need the data to be present somewhere on the page, and I'm looking for the best avenue to do so, and I am also curious why that would be the best option.

Answer 1

Store in the DOM element only what is specific for it, such as text and/or title for the popup window.

In this way your JS function can rely on the element to construct the popup.

<button data-content="My popup content" data-title="My title">More information</button>

<button data-content="My 2nd content" data-title="My 2nd title">More information</button>

$("document").on("click", "button", function () {
    var $this = $(this),
        title = $this.data("title"),
        content = $this.data("content");

    //open your popup
    //$this.popup({ title: title, content: content });
})

Answer 2

As others have said, you should only store short, specific information about the element with a data-* .

If you are looking to display a 'more info' style popup, containing lots of information. I would store that information in a hidden div that is referenced by the element. Then use JS to show that element.

<button type="button" data-target="#product-1-more-info">Product 1</button>
<button type="button" data-target="#product-2-more-info">Product 2</button>

<div id="product-1-more-info" style="display:none;">
  More awesome info about product #1
</div>
<div id="product-2-more-info" style="display:none;">
  More awesome infor about product #2
</div>

<script>
  $('button').click(function() {
    $($this.data('target')).show();
  });
</script>

Of course this can be dressed up with animations and light box effects. But now you aren't storing giant amounts of data in the element and your JS is much simpler.

Answer 3

Which one is better will depend on the use you want to give to that value, and on how the value is related to a particular element. So there's not a generic answer to your question, as it would go in a case-by-case basis. A good rule of thumb would be what some people commented:

• If the data is useful and specific to that element, use data-* .
• If there's no connection between the data and an element, use a variable in <script> .

But there's a misconception in your question, and you are missing (imho) a really important use case: data-* attributes are not exclusive for JavaScript, they can be seen and used in CSS (as part of a selector or to be used as a value), while variables inside a <script> tag are hidden to the CSS and cannot be used.

Right now data-* attributes are mainly supported in the content property for ::before and ::after but, at least in theory, they will be allowed in other properties making them more useful for styling purposes. For example:

div[data-columns] {
    column-count: attr(data-columns);
}

That rule will save you having multiple rules in your CSS, it will simplify your code and make it more robust and easier to maintain... sadly, it is not supported yet.