How do I change the ID of a HTML element with JavaScript

Question

I am modifying the ID of an HTML div element client side with JavaScript  The following code works OK in Internet Explorer but not in Firefox 2 0 0 20  It does work in more recent versions of Firefox   document getElementById  one   id    two     Can anyone tell me    Why this doesn t work in FireFox    How to make this work in FireFox    To clarify  I m changing the element ID to reference a different style in an external style sheet  The style is applied in IE but not in FF

User · Answer

It does work in Firefox  including 2 0 0 20   See http   jsbin com akili  add  edit to the url to edit     lt p id  one  gt One lt  p gt   lt a href     onclick  document getElementById  one   id    two   return false  gt Link2 lt  a gt    The first click changes the id to  two   the second click errors because the element with id  one  now can t be found   Perhaps you have another element already with id  two   FYI you can t have more than one element with the same id

User · Answer

That seems to work for me    lt html gt   lt head gt  lt style gt   monkey  color blue   ape  color purple   lt  style gt  lt  head gt   lt body gt   lt span id  monkey  onclick  changeid    gt  fruit  lt  span gt   lt script gt  function changeid      var e   document getElementById  monkey    e id    ape      lt  script gt   lt  body gt   lt  html gt    The expected behaviour is to change the colour of the word  fruit    Perhaps your document was not fully loaded when you called the routine

User · Answer

You can modify the id without having to use getElementById  Example    lt div id    One  onclick    One id    Two   return false   gt One lt  div gt    You can see it here  http   jsbin com elikaj 1   Tested with Mozilla Firefox 22 and Google Chrome 60 0

[javascript] How do I change the ID of a HTML element with JavaScript?

Examples related to javascript

Examples related to html

Examples related to cross-browser