How to set data attributes in HTML elements

by

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Demo

Reference

From the reference:

jQuery itself uses the .data() method to save information under the names ‘events’ and ‘handle’, and also reserves any data name starting with an underscore (‘_’) for internal use.

It should be noted that jQuery’s data() doesn’t change the data attribute in HTML.

So, if you need to change the data attribute in HTML, you should use .attr() instead.

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

​jQuery:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

See this demo

More Related Contents:

  1. Selecting element by data attribute with jQuery
  2. jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity
  3. Adding data attribute to DOM
  4. jQuery find element by data attribute value
  5. How to change the element of another div by clicking and hovering on an element of a different div
  6. Hide/Show div on specific page with jquery
  7. HTML nchor Tag doesn’t show link
  8. Use jQuery to hide a DIV when the user clicks outside of it
  9. Clear form fields with jQuery
  10. How to detect if two divs touch with jquery?
  11. Scroll to bottom of Div on page load (jQuery)
  12. jQuery find closest previous sibling with class
  13. Load content of a div on another page
  14. jQuery .html() vs .append()
  15. jQuery, get html of a whole element [duplicate]
  16. jQuery split long ul list in smaller lists
  17. How to add additional fields to form before submit?
  18. How to get only direct text without tags with jQuery in HTML
  19. jQuery select change show/hide div event
  20. How to use jQuery to add form elements dynamically
  21. Get the value of -webkit-transform of an element with jquery
  22. Auto-click button element on page load using jQuery
  23. jQuery get selected option value (not the text, but the attribute ‘value’)
  24. jQuery checkbox event handling
  25. Draggable div without jQuery UI
  26. How to force an HTML form to validate without submitting it via jQuery
  27. Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
  28. Jquery Multiple load in a DIV
  29. Async and document ready
  30. How can I change text after time using jQuery?

Leave a Comment