Set data attribute via object initializer in jQuery

Question

I want to set the data attribute for a tag (like data-id="..") using the following way:

$('<p>', {text: 'bla', data-?: '..'}).appendTo('#tagToAppendTo');

Unfortunetaly, I am not able to define the custom part (here marked as ?) in the object. Is there a way to do it like this, or do I need to resort to the .data() function?

$('<p>', {text: 'bla', 'data-test': 'some value'}).appendTo('#tagToAppendTo');?! Is that your issue? — A. Wolff
– A. Wolff, Commented Dec 1, 2017 at 10:28
I will try it again, i got an error doing it in this way. Update: I am dumb, i tried to set it without quotes. It makes sense that a custom attribute needs to be put in quotes. Thanks for the help! — Eti49
– Eti49, Commented Dec 1, 2017 at 10:29
But imho @Etibu, it is not really clear what you are asking here?! Especially because you are talking about .data() which isn't used for setting data-* attribute — A. Wolff
– A. Wolff, Commented Dec 1, 2017 at 10:30
Just FYI, JSON is a textual notation for data exchange. (More here.) If you're dealing with JavaScript source code, and not dealing with a string, you're not dealing with JSON. (Sorry, meant to post this earlier.) — T.J. Crowder
– T.J. Crowder, Commented Dec 1, 2017 at 10:48

2 revs · Accepted Answer · 2017-12-01 10:50:01Z

3

You can put the propety name in quotes when it's not a valid identifier name:

$('<p>', {text: 'bla', 'data-id': '..'}).appendTo('#tagToAppendTo');
// --------------------^-------^

Either single or double quotes are fine.

Is there a way to do it like this, or do I need to resort to the .data() function?

data doesn't set attributes. Details: jQuery .data() does not work, but .attr() does

edited Dec 1, 2017 at 10:50

community wiki

2 revs
T.J. Crowder

Sign up to request clarification or add additional context in comments.

4 Comments

Sylwek Over a year ago

Expanding your answer - if you use special chars as key of json, you have to use single or double quotes.

A. Wolff Over a year ago

@Sylwek This has nothing to do with json, it is javascript object. JSON is just a notation and only double quotes is valid regarding JSON notation

Sylwek Over a year ago

@A.Wolff Yes, you're right. I wrote it in wrong words

A. Wolff Over a year ago

@Sylwek I guess you get fooled by question's title :)

Guruprasad J Rao · Accepted Answer · 2017-12-01 10:30:42Z

0

You can make use of .attr option to set custom data-* values.

Snippet below.

$(document).ready(function(){
     $('<p>', {text: 'bla'}).attr('data-test','sample-value').appendTo('#tagToAppendTo');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tagToAppendTo"></div>

answered Dec 1, 2017 at 10:30

community wiki

Guruprasad J Rao

Collectives™ on Stack Overflow

Set data attribute via object initializer in jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related