Adding data attribute value not working

Question

I am trying to add a data attribute with a value to a li, but for some reason its not working. Iv done this before on divs but for some reason its not working correctly now.

Here is my jsfiddle http://jsfiddle.net/76MDE/1/

Here is my code.

<ul class="title-area">
    <li class="name">
        <h1><a href="#">cool</a></h1>
    </li>
</ul>

$('.name').data("element", "name");

Answer 1

.data() does not add the data-* attribute. It creates a jQuery object and it will be stored internally in a jQuery cache variable.

If you want to set the attribute you must use .attr()

$('.name').attr("data-element", "name");

Answer 2

Use this :

$('.name').attr("data-element", "name");

Demo

Answer 3

Fiddle

USE THIS

$('.name').attr("data", "element");

Answer 4

It IS working, as you can verify by putting a:

alert($('.name').data("element"));

It's only that the HTML is not modified.

If you want to see it in the HTML, too, use the following:

$('.name').attr("data-element", "name");