innerHTML

[Joe[y]]

so it's not often that i ask for help here but i'm not much of a DOM person and i could really do with some help on this topic. basically i'm tryingto teach myself how the innerHTML statement works - here's my story:

i'm using moo fx at http://photos.jlspurling.com to do a fade effect on my photos when a page loads. anyway, because moofx only kicks in once the page is fully loaded the photo appears and then once it is loaded disappears briefly before fading in again - this is just ugly. what i want is to not see the photo while it is loading. i figured the best way to do this was to not have the code showing at all until the javascript on the page kicks in (as this is all client side). soooo... i was recommended the innerHTML trick to basically insert the picture into an element with javascript. so here's the code to help break this down:

i currently have:

<script type="text/javascript">
window.onload = function() {
imageinfoReveal = new fx.Height('imagecontent', {duration: 600});
imageinfoReveal.hide();
imageReveal = new fx.Opacity('photo', {duration: 1500});
imageReveal.custom(0, 1)
}
</script>

which works fine for everything moofx wise apart from the problem above. so i need to include the innerHTML thing for window.onload too:

<script type="text/javascript">
window.onload = function() {
imageinfoReveal = new fx.Height('imagecontent', {duration: 600});
imageinfoReveal.hide();
imageReveal = new fx.Opacity('photo', {duration: 1500});
imageReveal.custom(0, 1)
getElementById("image").innerHTML = "<a href=\"'#\"><img src=\"photo.jpg\" id=\"photo\" /></a>"
}
</script>


as far as i'm aware this should insert the html into <div id="image"></div> in my template files. i'm sure this is absolutely rubbish on my part but i honestly have no clue what i'm doing - can anybody shed any light on why this isn't working or possibly offer me a solution?

hope that all made sense!

[Joe[y]]

SOLVED! - function innit() loveit!

[derevaun]

innerHTML is a quick way to put new content into the document, but once it's there it isn't easy to reference. An alternative is to use createElement() and appendChild() to manipulate the DOM. They're part of the W3C standards DOM and play well with childNodes, nodeValue, etc.

Jeremy Keith's DOM Scripting book is a practically painless way to learn up on that stuff when you need it. The approach makes Javascript a lot easier to learn and manage, IMHO.

[Joe[y]]

yeah i read up on the createElement but function innit being called just before </body> made more sense to me to be honest - is there something wrong with this approach?

[derevaun]

I don't think there's a practical problem with innerHTML--the preference for createElement et al is more philosophical, because it's standards oriented whereas innerHTML is proprietary DOM (Microsoft no less :o). All the modern browsers support innerHTML, but it may not work with XHTML 1.1 with the correct MIME type set.

Really the benefit of the W3C DOM style is using childNodes[] and getElementsByTagName() to reference elements, because you can separate the content from the behavior without needing to name elements or use IDs that are only for the script, similar to using descendant and sibling selectors to avoid non-semantic attributes.

And createElement works well with Ajax applications where Javascript gets content from the server without having to reload the page. I don't think that would work with innerHTML, because it depends on node hierarchy which innerHTML avoids.

[Joe[y]]

right. well maybe sometime in the future i'll consider using createElement instead. for now i'm just happy as it works anyway.