I need to add a second unique id to an element.

I use this to generate new ids

var id = 1;
function getNextId()
{
    return ++id;
}

Then I am doing this

$('<div id="content '" + getNextId() +"'" class="span6"></div>').appendTo('.new');

But I am getting an Uncaight SyntaxError: Unexpected identifier

How can I add multiple ids where the second is a unique one?

(I am remove the first id on a click, so I'm ok with leaving #content there)

Multiple ids on an element have been discussed in here: Can an html element have multiple ids?

I need to add a second unique id to an element.

I use this to generate new ids

var id = 1;
function getNextId()
{
    return ++id;
}

Then I am doing this

$('<div id="content '" + getNextId() +"'" class="span6"></div>').appendTo('.new');

But I am getting an Uncaight SyntaxError: Unexpected identifier

How can I add multiple ids where the second is a unique one?

(I am remove the first id on a click, so I'm ok with leaving #content there)

Multiple ids on an element have been discussed in here: Can an html element have multiple ids?

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 12:04 CommunityBot 111 silver badge asked Feb 7, 2013 at 16:09 rob.mrob.m 10.6k2121 gold badges8888 silver badges175175 bronze badges 8

• 1 It's looking like first of all $('<div id="content 'newId'" + getNextId() +"' class="span6"></div>').appendTo('.new'); Should read something more like: $('<div id="content ' + newId + '"' + getNextId() + ' class="span6"></div>').appendTo('.new'); But in addition, what is newId? It's hard to tell just what your variables are in your selector as you've got a good mixture of single and double quotes. Can you make sure those are where you think they should be? – Leeish Commented Feb 7, 2013 at 16:11
• Your quotes are wrong. – Denys Séguret Commented Feb 7, 2013 at 16:11
• newId is a string I am placing before the unique id i generate otherwise i would have a number – rob.m Commented Feb 7, 2013 at 16:13
• Look at the syntax highlighting. Also, element IDs cannot have spaces in them. – Matt Ball Commented Feb 7, 2013 at 16:15
• An element can only have one ID. If you are using XHTML, you can add a namespaced ID attribute, but that's not technically an ID, it's a different attribute. – gen_Eric Commented Feb 7, 2013 at 16:22

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 6

How can I add multiple ids where the second is a unique one?

You can't.

You can't have multiple IDs on one element. You get zero or one ID per element, and that is it. If you want to add additional things to select an element by, you can use classes.

Your syntax error is due to some very confused quotation marks; I suspect you wanted to do this:

$('<div id="content newId' + getNextId() + '" class="span6"></div>')

producing something like <div id="content newId3">, which can't work. You're not giving it two IDs, you're giving it one ID with a space in it, which is an invalid ID:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

There are two problems with your code:

1. 'a'b isn't valid JavaScipt. Try 'a' + b

2. Whitespace characters aren't allowed in HTML ids. And even if they were, all characters in the id attribute would make up the ID, so you can't assign more than one ID to an element. Use a class instead.

Looks like:

$('<div id="content '+ newId + getNextId() +'" class="span6"></div>').appendTo('.new');

I bet that is more right

Try this instead:

$('<div id="content-' + getNextId() + '" class="span6"></div>').appendTo('.new');

I think a pretty good start would be to add a + there.

'<div id="id-' my_id_var '"></div>'

Just isn't going to work.

"<div id=\"id-" + getNextID() + "\"></div>"

Will work just fine, though.

Second issue, each element gets 1 ID.
The point is that an ID is given to make an element uniquely-identifiable.
Why do you want the element to be uniquely identifiable twice?

There are lots of other ways of doing this.

First, you have class.
If you are working with objects which need similar states ("selected", "news-article", "user-interactive"), use classes.

Then, you have data- attributes.

<div id="player_1"
     class="player-character"
     data-health="42"
     data-x="320"
     data-y="240"
     data-speed="5"
    ><img src="..."
></div>

Then in JS, you could do something like:

var player_1 = document.getElementById("player_1");
player_1.dataset.health;  // "42"

These values are supported as far back as IE8, I think.
If you want to go further than that, then instead of using .dataset, you use .setAttribute("data-" + field_name, value)

If you're using jQuery, then it handles ALL of that for you, anyway.

So with all of these options, why do you want 2 ids per one element?