How do I change the ID of a HTML element with JavaScript?
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.
Solution 1:
It does work in Firefox (including 2.0.0.20). See http://jsbin.com/akili (add /edit to the url to edit):
<p id="one">One</p>
<a href="#" onclick="document.getElementById('one').id = 'two'; return false">Link2</a>
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).
Solution 2:
That seems to work for me:
<html>
<head><style>
#monkey {color:blue}
#ape {color:purple}
</style></head>
<body>
<span id="monkey" onclick="changeid()">
fruit
</span>
<script>
function changeid ()
{
var e = document.getElementById("monkey");
e.id = "ape";
}
</script>
</body>
</html>
The expected behaviour is to change the colour of the word "fruit".
Perhaps your document was not fully loaded when you called the routine?
Solution 3:
You can modify the id without having to use getElementById
Example:
<div id = 'One' onclick = "One.id = 'Two'; return false;">One</div>
You can see it here: http://jsbin.com/elikaj/1/
Tested with Mozilla Firefox 22 and Google Chrome 60.0