Create element with custom HTML attributes in Jquery

Question

I am trying to generate an anchor with jQuery, using some custom HTML5 attributes to get something like this.

$('<a/>', {href : "#local_anchor",text: "DUMMY_TOKEN", onClick:"remote_function('token')"}).attr("data-toggle", "modal")

If i use this code it works just fine.

$('<a/>', {
   href : "#local_anchor",
   text: "DUMMY_TOKEN",
   onClick:"remote_function('token')"
}).attr("data-toggle", "modal")

But i would like to pass data-toggle as an parameter along the first href, text, etc. When i try to do that i get an Syntax Error.

I also tried to use .data() but i couldn't set the value in the markup, only in DOM.

Answer 1

Just quote data-toggle and it will work:

$("<a/>", {
    href: "#local_anchor",
    text: "DUMMY_TOKEN",
    onClick: "remote_function('token')",
    "data-toggle": "modal"
});