jQuery change div ID from x to y

Question

using jQuery I would like to change the ID one of element within a page, a div, and give it a new one. I cannot use classes, must be ID. This will be part of an IF statement, for example: (pseudo:)

if x = greater than 1, change id of x to y else do nothing

So far I have:

$('#carriage-promo').attr('id','#carriage-promo-2');

However, this doesn't seem to work. Any suggestions?

I've never worked with ID, always class, and I would have used addClass and removeClass, which have always worked for me in the past!

change #carriage-promo-2 to carriage-promo-2(removed #) and try — Suryaprakash Pisay, Sep 05 '13 at 08:13
Got this all working now - thanks everyone for the great answers. :-) — Myles, Sep 05 '13 at 09:32

score 6 · Accepted Answer · edited May 23 '17 at 11:56

6

$('#carriage-promo').attr('id','#carriage-promo-2');

No need of #. So remove it

$('#carriage-promo').attr('id','carriage-promo-2');

or you can use .prop()

$('#carriage-promo').prop('id','carriage-promo-2');

See the perform test case in jsperf

Here is a sample Fiddle

edited May 23 '17 at 11:56

Community

1
1

answered Sep 05 '13 at 08:08

Praveen

53,079
32
129
156

In this case, would you use `attr` or `prop`? Can you explain? – Reinstate Monica Cellio Sep 05 '13 at 08:12
@Archer Sure, performance matter. check this http://jsperf.com/this-attr-id-vs-this-prop-id – Praveen Sep 05 '13 at 08:14
1

@Archer http://api.jquery.com/prop/ I don't fully understand the difference myself, however prop seems to be working, whereas attr did not. – Myles Sep 05 '13 at 08:18
@Myles I'm not sure why `.attr` didn't work. Check this http://jsfiddle.net/e2wFK/3/ – Praveen Sep 05 '13 at 09:03

score 2 · Answer 2 · answered Sep 05 '13 at 08:10

2

Try

$('#carriage-promo').attr('id','carriage-promo-2');

answered Sep 05 '13 at 08:10

Dipesh Parmar

26,601
7
57
86

is there any difference in your answer from the above posted one? – Sachin Sep 05 '13 at 08:11
ohh :) good one but i didn't mean that. I just wanted to know why are you writing the same answer that already given. – Sachin Sep 05 '13 at 08:14

score 1 · Answer 3 · answered Sep 05 '13 at 08:10

1

Just apply the String you want to update.

$('#carriage-promo').attr('id','carriage-promo-2');

Why because '#' is to select the element, with perticular Id

ID is DOM specific and # is Jquery specific.

answered Sep 05 '13 at 08:10

Suresh Atta

118,038
37
189
297

Vivek Jain · Answer 4 · 2013-09-05T08:34:07.390

1

No need of #, just use the id:

$('#carriage-promo').attr('id','carriage-promo-2');

Better use prop(). There have been some changes with attr() and prop() from Jquery v1.6 onwards:

$('#carriage-promo').prop('id','carriage-promo-2');

prop() is for Properties and attr() is for Attributes.

edited Sep 05 '13 at 08:34

answered Sep 05 '13 at 08:11

Vivek Jain

3,733
6
28
46

`.attr()` is not depreciated. Check this http://stackoverflow.com/a/15070342/1671639 – Praveen Sep 05 '13 at 08:20

jQuery change div ID from x to y

4 Answers4