How to set data attributes in HTML elements

Question

I have a div with an attribute data-myval    10   I want to update its value  wouldn t it change if I use div data  myval  20   Do I need to use div attr  data-myval   20   only   Am I getting confused between HTML5 and jQuery  Please advise  Thanks   EDIT  Updated div data  myval   20 to div data  myval  20   but still the HTML is not updating

User · Answer

Please take note that jQuery  data   is not updated when you change html5 data- attributes with javascript   If you use jQuery  data   to set data- attributes in HTML elements you better use jQuery  data   to read them  Otherwise there can be inconsistencies if you update the attributes dynamically  For example  see setAttribute    dataset    attr   below  Change the value  push the button several times and see the console    x000D   x000D      button   on  click   function     x000D    var field   document querySelector   textfield   x000D   x000D    switch      method   val      x000D      case  setAttribute   x000D        field setAttribute  data-customval   field value  x000D        break  x000D      case  dataset   x000D        field dataset customval   field value x000D        break  x000D      case  jQuerydata   x000D          field  data  customval   field value  x000D        break  x000D      case  jQueryattr   x000D          field  attr  data-customval   field value  x000D        break  x000D      x000D   x000D    objValues      x000D    objValues    field  data  customval         field  data  customval   x000D    objValues    field  attr  data-customval         field  attr  data-customval   x000D    objValues  field getAttribute  data-customval       field getAttribute  data-customval   x000D    objValues  field dataset customval     field dataset customval x000D   x000D    console table  objValues   x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt h1 gt Example lt  h1 gt  x000D   lt form gt  x000D     lt input id  textfield  type  text  data-customval  initial  gt  x000D     lt br  gt  x000D     lt input type  button  value  Set and show in console table  F12   id  button  gt  x000D     lt br  gt  x000D     lt select id  method  gt  x000D       lt option value  setAttribute  gt setAttribute lt  option gt  x000D       lt option value  dataset  gt dataset lt  option gt  x000D       lt option value  jQuerydata  gt jQuery data lt  option gt  x000D       lt option value  jQueryattr  gt jQuery attr lt  option gt  x000D     lt  select gt  x000D     lt div id  results  gt  lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

If you re using jQuery  use  data     div data  myval   20     You can store arbitrary data with  data    but you re restricted to just strings when using  attr

User · Answer

jQuery   data   vs  attr   vs  extend    The jQuery method  data   updates an internal object managed by jQuery through the use of the method  if I m correct   If you d like to update your data-attributes with some spread  use --     body   attr    data-test    text        -- otherwise     body   attr  data-test    text    will work just fine   Another way you could accomplish this is using --    extend     body   0  dataset    datum  true        -- which restricts any attribute change to HTMLElement prototype dataset  not any additional HTMLElement prototype attributes

User · Answer

Another way to set the data- attribute is using the dataset property    lt div id  user  data-id  1234567890  data-user  johndoe  data-date-of-birth gt John Doe lt  div gt   const el   document querySelector   user        el id     user     el dataset id      1234567890     el dataset user      johndoe     el dataset dateOfBirth            set the data attribute el dataset dateOfBirth    1960-10-03       Result  el dataset dateOfBirth     1960-10-03  delete el dataset dateOfBirth     Result  el dataset dateOfBirth     undefined      someDataAttr  in el dataset     false el dataset someDataAttr    mydata      Result   someDataAttr  in el dataset     true

User · Answer

To keep jQuery and the DOM in sync  a simple option may be                     mydiv   data  myval  20  attr  data-myval  20

User · Answer

Vanilla Javascript solution  HTML   lt div id  mydiv  data-myval  10  gt  lt  div gt    JavaScript    Using DOM s getAttribute   property   var brand   mydiv getAttribute  data-myval    returns  10   mydiv setAttribute  data-myval    20          changes  data-myval  to  20   mydiv removeAttribute  data-myval             removes  data-myval  attribute entirely  Using JavaScript s dataset property  var myval   mydiv dataset myval       returns  10  mydiv dataset myval    20             changes  data-myval  to  20  mydiv dataset myval   null            removes  data-myval  attribute

User · Answer

HTML   lt div id  mydiv  data-myval  10  gt  lt  div gt    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   lt div id  outer  gt       lt div id  mydiv  data-myval  10  gt  lt  div gt   lt  div gt     JS   alert     outer   html          alerts  lt div id  mydiv  data-myval  10  gt   lt  div gt  var a       mydiv   data  myval      getter     mydiv   attr  data-myval   20      setter alert     outer   html         alerts  lt div id  mydiv  data-myval  20  gt   lt  div gt    See this demo

User · Answer

You can also use the following attr thing   HTML   lt div id  mydiv  data-myval  JohnCena  gt  lt  div gt    Script       mydiv   attr  data-myval    Undertaker       sets       mydiv   attr  data-myval       gets   OR      mydiv   data  myval       gets value     mydiv   data  myval   John Cena       sets value

[jquery] How to set data attributes in HTML elements

Examples related to jquery

Examples related to html

Examples related to custom-data-attribute