Adding data attribute to DOM

Question

div   data  info   1    alert    div   data  info       this works         div data-info  1     text  222      but this don t work   I m creating element within jquery  After that  I want to add attribute  data   He s like and is added  but in the DOM  this is not apparent  and I can t get the item  using     div data-example  example     html     jsfiddle

User · Accepted Answer

Use the  data   method      div   data  info    222      Note that this doesn t create an actual data-info attribute  If you need to create the attribute  use  attr        div   attr  data-info    222

User · Answer

document createElement  img    attr                   src   https   graph facebook com   friend id   picture                   title  friend name                    data-friend-id  friend id                   data-friend-name  friend name                appendTo divContainer

User · Answer

to get the text from a    lt option value  1  data-sigla  AC  gt Acre lt  option gt   uf       selectestado option selected   attr  data-sigla

User · Answer

in Jquery  data  doesn t refresh by default    alert     outer   html     var a       mydiv   data  myval      getter     mydiv   data  myval   20      setter alert     outer   html       You d use  attr  instead for live update   alert     outer   html     var a       mydiv   data  myval      getter     mydiv   attr  data-myval   20      setter alert     outer   html

User · Answer

jQuery s  data   does a couple things but it doesn t add the data to the DOM as an attribute  When using it to grab a data attribute  the first thing it does is create a jQuery data object and sets the object s value to the data attribute  After that  it s essentially decoupled from the data attribute   Example    lt div data-foo  bar  gt  lt  div gt    If you grabbed the value of the attribute using  data  foo    it would return  bar  as you would expect  If you then change the attribute using  attr  data-foo    blah   and then later use  data  foo   to grab the value  it would return  bar  even though the DOM says data-foo  blah   If you use  data   to set the value  it ll change the value in the jQuery object but not in the DOM   Basically   data   is for setting or checking the jQuery object s data value  If you are checking it and it doesn t already have one  it creates the value based on the data attribute that is in the DOM   attr   is for setting or checking the DOM element s attribute value and will not touch the jQuery data value  If you need them both to change you should use both  data   and  attr    Otherwise  stick with one or the other

User · Answer

Using  data   will only add data to the jQuery object for that element  In order to add the information to the element itself you need to access that element using jQuery s  attr or native  setAttribute     div   attr  data-info   1      div   0  setAttribute  data-info  1     In order to access an element with the attribute set  you can simply select based on that attribute as you note in your post     div data-info  1       but when you use  data   you cannot  In order to select based on the  data   setting  you would need to use jQuery s filter function   jsFiddle Demo   x000D   x000D     div   data  info   1   x000D    alert    div   data  info      1 x000D   x000D     div   filter function    x000D     return   this  data  info      1   x000D     text  222    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt 1 lt  div gt  x000D   x000D   x000D

[jquery] Adding data attribute to DOM

Examples related to jquery

Examples related to html

Examples related to custom-data-attribute