0

I want to attach data attribute to element. My code is

 $('<a>', {
     class: 'like-comment 
             comment-like-color 
             comment_main_id_' + response.id,
     text: '', 
     href: 'javascript:;',
     }).appendTo(commentBody)
     .append($('<i>', {class: 'fa fa-thumbs-up'}));

My HTML data generated is like

<a class="like-comment comment-like-color 
          comment_main_id_{{$comment['id']}}" href="javascript:
          data-like-comment-id=" {{$comment[ 'id']}} ";">
    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>

There's a data (data-like-comment-id) attribute, which I want to create using jQuery. Could someone please help me with it.

Albert Einstein
  • 7,472
  • 8
  • 36
  • 71
Ashish
  • 647
  • 7
  • 18
  • 2
    Add it like the other attributes in your list (text, href) or use `.attr('data-like-comment-id', 'value')`. http://api.jquery.com/attr/ – Lain Jul 06 '18 at 06:00

5 Answers5

2

The main difference between $.fn.attr and $.fn.data is:

$.fn.attr: stores information/data directly on the element attribute which get visible for inspection, and they are available through element's native API.

$.fn.data: stores info where it cannot be accessible outside JQuery and it's more closed

Data set with attr()

  • accessible through $(element).attr('data-name')
  • accessible through element.getAttribute('data-name') too
  • if the value form is data-name it is also accessible from $(element).data(name) and element.dataset['name'] and element.dataset.name
  • Visible on element for inspection
  • Cannot be objects

Data set with .data()

  • accessible only through .data(name)
  • Not accessible through anywhere else
  • Not publicly visible for inspection
  • can be objects

Source

use below for .attr() usage

$('elm').attr(attname,attvalue);

use data- prefix before to avoid collision

$('elm').attr('data-'+attname,attvalue);

use below for .data()

$('elm').data(attname,attvalue);
Keshan Nageswaran
  • 8,060
  • 3
  • 28
  • 45
2

Give your anchor element an id when you create 

$('<a id="foo"></a>'); // Simplified for brevity

Then you can select it late add a data attribute with the $.data() function:

const mycomment = "some value";
$("#foo").data("like-comment", mycomment);
hammus
  • 2,602
  • 2
  • 19
  • 37
2

Use the attr property

 $('<a>',{"class":'test',attr:{'prop':'value'}})
madalinivascu
  • 32,064
  • 4
  • 39
  • 55
2

You may just add it in your argument list on creation:

 $('<a>', {
 class: 'like-comment comment-like-color comment_main_id_',
 text: '', 
 href: 'javascript:;',
 'data-like-comment-id': 'whatever'
}).appendTo(document.body);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or add it after using .attr(): http://api.jquery.com/attr/

$('<a>', {
    class: 'like-comment comment-like-color comment_main_id_',
    text: '', 
    href: 'javascript:;',
})
.attr('data-like-comment-id', 'whatever2')
.appendTo(document.body);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or using the .data() function: https://api.jquery.com/data/

This one wont show in the DOM

$('<a>', {
    class: 'like-comment comment-like-color comment_main_id_',
    text: '', 
    href: 'javascript:;',
})
.data('like-comment-id', 'whatever3')
.appendTo(document.body);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Lain
  • 3,657
  • 1
  • 20
  • 27
1

for 'data-' attribute, use this

 $(selector).data(key, value)
Steven J
  • 63
  • 7