0

The data-* attributes are used to store custom data. The data-* attributes generated through jQuery are not visible in the DOM while the data-* attributes written in the HTML code are visible in the DOM.

My question is what difference is making the jQuery generated element's data-* attributes not visible in the DOM?

Secondly, can we hide data-* in the DOM object like in the element generated through jQuery?

$('#div2').append($('<h2/>').html('h2 Element generated with JQUERY').data('test', '5000'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <h2 data-test="60000">This is h2 Element</h2>
</div>
<div id="div2"></div>

enter image description here

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Arif H-Shigri
  • 1,086
  • 12
  • 27
  • 1
    1) If you use `data()` to change the attribute value then jQuery stores the value in an in-memory object for better performance over calls to change/read the DOM. If you use `data()` as both getter and setter, you'll have no issues. See the duplicate for more information 2) Yes, use `dataset`: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset – Rory McCrossan Jan 31 '19 at 10:58
  • "*Secondly, can we hide `data-*` in the DOM object like in the element generated through jQuery?*" - as in the duplicate and above, you're not "hiding" the `data-*`, it's just not being added in the first place. – freedomn-m Jan 31 '19 at 11:05
  • @RoryMcCrossan your comment is making sense Thanks. But the title of question do not justify. – Arif H-Shigri Jan 31 '19 at 11:07
  • @ArifH-Shigri Glad it helped. I updated the title to remove the tags, as they don't go there. – Rory McCrossan Jan 31 '19 at 11:10

0 Answers0