Changing an element's ID with jQuery

Question

I need to change an element's ID using jQuery.

Apparently these don't work:

jQuery(this).prev("li").attr("id")="newid"
jQuery(this).prev("li")="newid"

I found out that I can make it happen with the following code:

jQuery(this).prev("li")show(function() {
    this.id="newid";
});

But that doesn't seem right to me. There must be a better way, no? Also, in case there isn't, what other method can I use instead of show/hide or other effects? Obviously I don't want to show/hide or affect the element every time, just to change its ID.

(Yep, I'm a jQuery newbie.)

Edit
I can't use classes in this case, I must use IDs.

In JavaScript, you can assign to a variable (`foo = 1`), a member of an object (`foo.bar = 2` or `foo['bar'] = 2`) or an array subscript (`foo[0] = 3`), but assigning to an expression, like the result of an operator (`(x + b) = 5`) or the result of a function call (`foo() = 1`, `foo(x).bar(y) = 7`) doesn't make any sense, so it's definitely not going to be the way things work in jQuery or any other JavaScript library. — rakslice, Aug 19 '13 at 18:05

Eran Galperin · Accepted Answer · 2011-04-26T02:24:12.550

587

Your syntax is incorrect, you should pass the value as the second parameter:

jQuery(this).prev("li").attr("id","newId");

edited Apr 26 '11 at 02:24

answered Dec 07 '08 at 17:39

Eran Galperin

86,251
24
115
132

6

Don't you need to detach the element from the DOM and replace it with a new element with a new ID in it's place? To avoid breaking the DOM ...? – cllpse Dec 08 '08 at 13:09
17

jQuery takes care of that, roosteronacid. – McPherrinM Nov 18 '09 at 20:18
17

arrived here double checking id reassignment - should this now be `.prop( ... )` instead of `.attr( ... )`? – Carl Jan 23 '12 at 18:21
@CarolinaJay65 depends whether newId is a variable or a value. ;-) – senfo Sep 07 '12 at 13:15
Would that survive a reload? [my guess is that it wouldn't] – monksy May 02 '14 at 05:35
2

@Carl according to latest jquery docs & examples, `id` should still be set using `attr(...)` – JoeBrockhaus Nov 24 '14 at 22:41
How about changing the id value of a `` ? – Pathros Jun 30 '16 at 19:28

Jeremy Moritz · Answer 2 · 2016-06-07T18:34:54.497

90

A PREFERRED OPTION over .attr is to use .prop like so:

$(this).prev('li').prop('id', 'newId');

.attr retrieves the element's attribute whereas .prop retrieves the property that the attribute references (i.e. what you're actually intending to modify)

edited Jun 07 '16 at 18:34

answered Aug 25 '14 at 20:28

Jeremy Moritz

13,864
7
39
43

1

what is the difference between the attribute and the property? – Olga Farber Oct 25 '22 at 11:36

score 47 · Answer 3 · answered Dec 07 '08 at 17:40

47

What you mean to do is:

jQuery(this).prev("li").attr("id", "newID");

That will set the ID to the new ID

answered Dec 07 '08 at 17:40

Pim Jager

31,965
17
72
98

score 11 · Answer 4 · edited May 14 '13 at 23:56

11

I did something similar with this construct

$('li').each(function(){
  if(this.id){
    this.id = this.id+"something";
  }
});

edited May 14 '13 at 23:56

Petr Safar

107
2
11

answered Jan 25 '09 at 19:46

score 7 · Answer 5 · answered Dec 07 '08 at 17:31

7

I'm not sure what your goal is, but might it be better to use addClass instead? I mean an objects ID in my opinion should be static and specific to that object. If you are just trying to change it from showing on the page or something like that I would put those details in a class and then add it to the object rather then trying to change it's ID. Again, I'm saying that without understand your underlining goal.

answered Dec 07 '08 at 17:31

Tim Knight

8,346
4
33
32

3

the joys of legacy systems - I understand your pain then. Eran answer is definitely the best then. – Tim Knight Dec 07 '08 at 19:44
7

Actually setting the id is a useful and worthwhile thing to do if you're building up the DOM by using hidden-templates in the HTML and then cloning them using jquery. – Steve Knight Aug 02 '11 at 08:40

score 4 · Answer 6 · answered Sep 23 '15 at 16:59

4

<script>
       $(document).ready(function () {
           $('select').attr("id", "newId"); //direct descendant of a
       });
</script>

This could do for all purpose. Just add before your body closing tag and don't for get to add Jquery.min.js

answered Sep 23 '15 at 16:59

Prassanna D Manikandan

645
1
6
16

score 0 · Answer 7 · answered May 08 '14 at 20:27

Eran's answer is good, but I would append to that. You need to watch any interactivity that is not inline to the object (that is, if an onclick event calls a function, it still will), but if there is some javascript or jQuery event handling attached to that ID, it will be basically abandoned:

$("#myId").on("click", function() {});

If the ID is now changed to #myID123, the function attached above will no longer function correctly from my experience.

Changing an element's ID with jQuery

7 Answers7

Linked

Related