Question

I have a javascript that generates a list for me. This all works. The problem is in the <a> tag. In this tag I want to ad more attributes like data-i="2" Putting an extra attribute in like: menu: f.menuCaption, class: f.class or style: f.style works perfectly. Please see my Fiddle: http://jsfiddle.net/mauricederegt/mjdyW/13/

But when I want to add a new attribute like: data-i it doesn’t work. How come? See demo fiddle: http://jsfiddle.net/mauricederegt/mjdyW/15/ (the second <UL> is the one adapted using data-i).

How can I make it so that I can also add/use attributes like data-i to the script? My end goal is to create this: <a class="d" data-i="50" data-t="d" data-f="2" data-r="0" data-c="0" style="margin-top: -4.725em; margin-left: -4.6em; "></a> (getting the values from the script of course)

Thank you for your time

Answer 1

data-i is not a valid identifier in JavaScript, so you need to quote it in object literals:

{
    'data-i': 'whatever'
}

and during property access:

whatever['data-i']

See updated jsFiddle.