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:
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.
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).
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?
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
