Javascript: "Dangling" Reference to DOM element?
Posted
by Channel72
on Stack Overflow
See other posts from Stack Overflow
or by Channel72
Published on 2010-04-30T23:51:32Z
Indexed on
2010/04/30
23:57 UTC
Read the original article
Hit count: 304
JavaScript
|dom
It seems that in Javascript, if you have a reference to some DOM element, and then modify the DOM by adding additional elements to document.body, your DOM reference becomes invalidated.
Consider the following code:
<html>
<head>
<script type = "text/javascript">
function work()
{
var foo = document.getElementById("foo");
alert(foo == document.getElementById("foo"));
document.body.innerHTML += "<div>blah blah</div>";
alert(foo == document.getElementById("foo"));
}
</script>
</head>
<body>
<div id = "foo" onclick='work()'>Foo</div>
</body>
</html>
When you click on the DIV, this alerts "true", and then "false." So in other words, after modifying document.body, the reference to the DIV element is no longer valid. This behavior is the same on Firefox and MSIE.
Some questions:
Why does this occur? Is this behavior specified by the ECMAScript standard, or is this a browser-specific issue?
Note: there's another question posted on stackoverflow that seems to be referring to the same issue, but neither the question nor the answers are very clear.
© Stack Overflow or respective owner
