innerHTML problem in Safari

[garthusenet]

I have a fairly complicated application written in Javascript+DOM, and
I've run into an odd problem that only shows up in Safari. Basically,
after setting innerHTML of a DIV, the div ends up empty instead of with
the correct content. In fact, the children of the DIV all vanish, and
it becomes impossible to set the contents thereafter.

The much simplified scenario:

<div id='divname'>
hello
</div>

var divReference = document.getElementById('divname');
divReference.innerHTML = 'loo loo loo';
alert(divReference.innerHTML);

At this point the laert box is empty. Also, when I iterate through the
properties of the divReference, they are quite messed up. For example,
firstChild and lastChild are null. Also, some properties are
duplicated.

Has anybody run into this? Unfortunately I have been unable to
reproduce in a simple test app, it seems to only happen in my
complicated app.

Also, please don't advise me to use DOM instead of innerHTML. I know
DOM is more elegant and correct, unfortunately it would be very
complicated given the amount of content I want to be pushing around.

Thanks,
Garth

 

[Walton]

just at a quick first glance. i see you've single-quoted your div's
id. id='divname'. have you tried double quoting in your actual code?
some browsers can be super picky about those things.

 

[Garth]

Thanks for the suggestion. I wasn't aware that there was any difference
between ' and " in HTML. However, switching to double quotes didn't
make any difference.

Garth

 

[Walton]

one more thought, just a shot in the dark- in your much more complex
app, i'm guessing that you're using innerHTML to dump a lot of HTML
into that div tag. have you made sure that String of HTML is valid?
often times when i write big long Strings of HTML and stick them in a
div using innerHTML, i find that i've messed up a set of quotes
somewhere or haven't closed a tag properly.

 

[Garth]

Yup, I'd thought of that. When I found the point where it failed (as
shown in previous message) I changed the complex HTML string to a
simple text only string. It still failed.

 

[Lasse Reichstein Nielsen]

just at a quick first glance. i see you've single-quoted your div's
id. id='divname'. have you tried double quoting in your actual code?
some browsers can be super picky about those things.

They shouldn't. Either way of quoting attributes has been valid since
the first versions of HTML. It should not make a difference.
(Ofcourse, if the attribute value contains an apostrophe, you'll
either have to quote it or use double quotes, e.g.,
title="it's fun"
or
title='it&apos;s fun"
and failing to do that would make the browser "picky", and rightly so)

/L

 

[RobG]

I have a fairly complicated application written in Javascript+DOM, and
I've run into an odd problem that only shows up in Safari. Basically,
after setting innerHTML of a DIV, the div ends up empty instead of with
the correct content. In fact, the children of the DIV all vanish, and
it becomes impossible to set the contents thereafter.

There is a bug reported at quirksmode regarding innerHTML in XHTML pages:

<URL:http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_in_xh.html>

I don't know whether that covers your scenario or not.

The much simplified scenario:

<div id='divname'>
hello
</div>

var divReference = document.getElementById('divname');
divReference.innerHTML = 'loo loo loo';
alert(divReference.innerHTML);

At this point the laert box is empty. Also, when I iterate through the
properties of the divReference, they are quite messed up. For example,
firstChild and lastChild are null. Also, some properties are
duplicated.

Has anybody run into this? Unfortunately I have been unable to
reproduce in a simple test app, it seems to only happen in my
complicated app.

That would indicate that there are possibly errors in the HTML you are
inserting, the differences between browsers in the generated DOM may be
the result of error correction.

Post a link to a page that shows the error, or try validating the HTML
you are trying to insert.

Also, please don't advise me to use DOM instead of innerHTML. I know
DOM is more elegant and correct, unfortunately it would be very
complicated given the amount of content I want to be pushing around.

There is no public standard for innerHTML, so you can't depend on it
being implemented consistently. It generally works OK where the HTML is
generated elsewhere then inserted, but if you are trying to read the DOM
using innerHTML then insert it back in again, results will vary between
browsers.

 

[ASM]

(e-mail address removed) a écrit :

Also, please don't advise me to use DOM instead of innerHTML. I know
DOM is more elegant and correct, unfortunately it would be very
complicated given the amount of content I want to be pushing around.

unfortunatly Safari (and probably Firefox) using innerHTML for complex
code (elements with events, datas comming from text-field ...) loose
quite a bit of important infos ...

innerHTML would be only used for some text, no more.

but, perhaps in your innerHTML you have closing tags ?
and, of course you use '<\/tag>' insteed of '</tag>' ?