So far I know that we can store data in html element by using:

<div  data-test="hello">
$.("div").data("test")

However , I just can store raw text for data attribute

what I need is:

var t= hello
<div data-test=t>

but when I tried this , it shows the letter t instead of hello.

So far I know that we can store data in html element by using:

<div  data-test="hello">
$.("div").data("test")

However , I just can store raw text for data attribute

what I need is:

var t= hello
<div data-test=t>

but when I tried this , it shows the letter t instead of hello.

• javascript
• jquery
• html
• web
• attributes

Share Improve this question Follow edited Sep 5, 2017 at 7:27 Suren Srapyan 68.7k1414 gold badges125125 silver badges117117 bronze badges asked Sep 5, 2017 at 7:16 Jake LamJake Lam 3,47233 gold badges2828 silver badges5252 bronze badges 1

• You should read up on the difference between HTML and the DOM, particularly the difference between HTML attributes and DOM node properties. – Lennholm Commented Sep 5, 2017 at 7:21

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Actually you are changing not the attribute but an property of the DOM object. For data JavaScript has it's own mechanism to hold data for the elements. For more take a look on Documentation.

You can change the data using jQuery (as you have already used it). Use data function and pass your variable as the second argument to the function like $("#d").data("test", t);

console.log($("#d").data("test"));

const t = 'hello';
$("#d").data("test", t); // <- second parameter

console.log($("#d").data("test"));

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d" data-test="test">

You can use the attr() function of JQuery instead of data()

var t= 'hello';
$("div").attr("data-test",t);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div  data-test=t>asd

Without jQuery

jQuery is definitely unnecessary in this case. You can achieve the same thing with this code

HTML

<div data-test="hello">

JS

const textToChange = 'other text';
const divWithDataAttribute = document.querySelector('[data-test]');
diveWithDataAttribute.dataSet.test = textToChange;

Conclusion

This will apply the new result to the data attribute and we didn't need jQuery.

A thing to note is the part dataSet.test this part es from the data-test attribute. We drop the data- part and camel case the rest of the words.

For example data-test-new-test="whatever" bees testNewTest when accessing the dataSet.

yes you can try this:

 $("div").attr("data-test", "test");

var t="hello";
$("div").attr("data-test",t);