Object Manipulation: IE vs. FF

[VUNETdotUS]

In JavaScript I have:
var X = new Object()
X.div = document.createElement('div')

Then I have HTML on a page:
<div id='Container'><table><tr><td id='cellContainer'></td></tr></
table></div>

Then I append X.div to cell (cellContainer):
document.getElementById("cellContainer").appendChild(X.div)

Problem:
When I remove the table like
document.getElementById("Container").innerHTML="", X.div keeps its
properties (such as its own innerHTML) in FF, but in IE innerHTML is
nothing.

Can anyone explain and suggest how to fix it?
Thanks

 

[RobG]

In JavaScript I have:
var X = new Object()
X.div = document.createElement('div')

Then I have HTML on a page:
<div id='Container'><table><tr><td id='cellContainer'></td></tr></
table></div>

Then I append X.div to cell (cellContainer):
document.getElementById("cellContainer").appendChild(X.div)

Problem:
When I remove the table like
document.getElementById("Container").innerHTML="", X.div keeps its
properties (such as its own innerHTML) in FF, but in IE innerHTML is
nothing.

Can anyone explain

There is no public standard for innerHTML, therefore you are likely to
see significant variances in its implementation. It seems in IE that
when a DOM object is replaced by innerHTML, it is destroyed regardless
of whether there are any references to it. That is somewhat contrary
to normal javascript.

In Firefox however, it seems that a DOM element continues to exist if
some variable holds a reference to it, even if it has been replaced
using innerHTML. Since there is no standard that says what should
happen in this case (and even if there was it likely would not cover
this particular detail) all you can say is that they behave
differently.

and suggest how to fix it?

The innerHTML property is supplied by the host environment, the only
way to change its properties and behaviour is to get into the source
code. However, you could work around the issue by not using
innerHTML, there are other ways using normal DOM methods to remove the
content of an element, one of which goes something like:

function removeContent(el) {
if (el) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
}
}

Now both browsers (and all others that are W3C DOM 1 Core compliant)
should behave like Firefox does in your example - hopefully that is
what you were after.

<URL: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066 >

 

[pr]

There is no public standard for innerHTML, therefore you are likely to
see significant variances in its implementation. It seems in IE that
when a DOM object is replaced by innerHTML, it is destroyed regardless
of whether there are any references to it. That is somewhat contrary
to normal javascript.

In fact IE preserves a child node after its parent's innerHTML is set to
"" if a variable references it. It is appended to a document fragment,
its own innerHTML is set to "" and its childNodes.length to 0. However,
IE 6 frequently crashes when you try to reference descendant nodes
'overwritten' in this way, so it's not a method to rely on.

 

[VUNETdotUS]

There is no public standard for innerHTML, therefore you are likely to
see significant variances in its implementation. It seems in IE that
when a DOM object is replaced by innerHTML, it is destroyed regardless
of whether there are any references to it. That is somewhat contrary
to normal javascript.

In Firefox however, it seems that a DOM element continues to exist if
some variable holds a reference to it, even if it has been replaced
using innerHTML. Since there is no standard that says what should
happen in this case (and even if there was it likely would not cover
this particular detail) all you can say is that they behave
differently.


The innerHTML property is supplied by the host environment, the only
way to change its properties and behaviour is to get into the source
code. However, you could work around the issue by not using
innerHTML, there are other ways using normal DOM methods to remove the
content of an element, one of which goes something like:

function removeContent(el) {
if (el) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
}
}

Now both browsers (and all others that are W3C DOM 1 Core compliant)
should behave like Firefox does in your example - hopefully that is
what you were after.

<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066>

Thanks. removeChild did the job.