Can I use a custom attribute on a div?

Question

I need to get a number value in jQuery, but for this to work I need a 3rd attribute on my div.

<div class="button" id="button$post" numberlk="$total">

This works fine! But HTML the validator tells me:

Error: Attribute numberlk not allowed on element div at this point.

What can I do to make it work correctly?

Answer 1

While it's possible to create your own attributes in your HTML, you shouldn't. This is because it renders your HTML invalid which can lead to unexpected issues with the UI and also any Javascript running on the page.

A much better approach to store custom metadata in an element is to use a data attribute instead, eg data-numberlk="$total"

<div class="button" id="button$post" data-numberlk="$total">

You can then retrieve this value in jQuery using the data() method:

var likes = $('.button').data('numberlk');

Or using plain JS:

var likes = document.querySelector('.button').dataset.numberlk;