Add multiple unique ids to an element

Question

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?

It's looking like first of all `$('
').appendTo('.new');` Should read something more like: `$('
').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, Feb 07 '13 at 16:11
newId is a string I am placing before the unique id i generate otherwise i would have a number — rob.m, Feb 07 '13 at 16:13
Look at the syntax highlighting. Also, element IDs cannot have spaces in them. — Matt Ball, Feb 07 '13 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, Feb 07 '13 at 16:22
i read it here: http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids — rob.m, Feb 07 '13 at 16:22
@rob.m: Check out this comment from that question: http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids#comment14501781_5685221 — gen_Eric, Feb 07 '13 at 16:25

score 6 · Answer 1 · answered Feb 07 '13 at 16:11

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 (".").

answered Feb 07 '13 at 16:11

user229044

232,980
40
330
338

look at this: http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids – rob.m Feb 07 '13 at 16:16
therefore taking the fact we can actually have 2 different ids, you are suggesting to output 2 completly id= rather than concatenate the 2 into one id= as otherwise i'd get what you are syaing, 1 id name with space in it? – rob.m Feb 07 '13 at 16:20
basically this right? $('
').appendTo('.new'); – rob.m Feb 07 '13 at 16:21
1

@rob.m: You *CANNOT* have 2 different IDs, and you also can't define the same attribute twice. He was just pointing out a syntax error in your code. You *can* do this in XHTML: `
`, but only because one is namespaced.
– gen_Eric Feb 07 '13 at 16:23
2

@rob.m **No**. What I'm saying is you **can't do it**. You **cannot have two IDs**. It's impossible. There **is no valid syntax for doing so**. – user229044 Feb 07 '13 at 16:24
yes i got what you mean, i could use xml:id="bar", read the link on the comment – rob.m Feb 07 '13 at 16:26
but even tho i could use that, is pointless for my case. I it's a fail my question unfortunatly :( Thanks – rob.m Feb 07 '13 at 16:34

score 2 · Answer 2 · answered Feb 07 '13 at 16:12

There are two problems with your code:

'a'b isn't valid JavaScipt. Try 'a' + b
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.

score 1 · Answer 3 · answered Feb 07 '13 at 16:13

1

Looks like:

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

I bet that is more right

answered Feb 07 '13 at 16:13

Leeish

5,203
2
17
45

score 0 · Answer 4 · answered Feb 07 '13 at 16:12

0

Try this instead:

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

answered Feb 07 '13 at 16:12

Matias

641
5
17

i need to keep newId as it is a string I am placing befroe the enwly created uniqe id, otherwise it'd be a number – rob.m Feb 07 '13 at 16:14

score 0 · Answer 5 · answered Feb 07 '13 at 16:24

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?

Add multiple unique ids to an element

5 Answers5