Set data attribute with Jquery

Question

I've this line of code :

<p class="main-description" >Hello world</p>

I want to add a data attribute with JQuery, I can't change the HTML

So I try this :

$('.main-description').data('data-custom','5s');

The final result should be this but it does not work

<p class="main-description" data-custom="5s" >Hello world</p>

also it should be `data('custom','5s');` – Pranav C Balan May 30 '16 at 18:21 — Pranav C Balan, May 30 '16 at 18:21
try `$('.main-description').attr('data-custom','5s');` – CMedina May 30 '16 at 19:57 — CMedina, May 30 '16 at 19:57

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

You need to use attr()

$('.main-description').attr('data-custom', '5s');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="main-description">Hello world</p>

For the difference between them refer : jQuery Data vs Attr?

edited May 23 '17 at 12:15

Community

answered May 30 '16 at 18:18

Pranav C Balan

1 Answers1