Getting a function to actually output HTML

Have some JavaScript running that's dynamically building an array of images.

Here's the simplified version:

    var imgArray = new Array(
        "mainBG.jpg",
        "mainBG2.jpg",    
        "mainBG3.jpg",
        "mainBG4.jpg"
    );

    var img = Math.floor(Math.random()*imgArray.length);

    jQuery(document).ready(function() {
        $("body").ezBgResize({img : "/lib/img/bkgr/" + imgArray[img]});
    });

    function generateThumbs(){
         var t = document.getElementById("thumbs");
         var ret = '';

        for(i=0;i<imgArray.length;i++){

            var image = imgArray[i];

            ret += '<a href="#" onclick="changeBig(\''+image+'\')" /><img src="/lib/img/bkgr/'+image+'" alt="thumbnail image" width="77" height="44" /></a>';
        }      

        return ret;        
    };

    function changeBig(bg){
        $("body").ezBgResize({img : "/lib/img/bkgr/" + bg});
    }

Then in the page, it's being written out simply with:

 <div class="scrollable">   
    &开发者_开发问答lt;div class="items" id="thumbs">
        <script>document.write(generateThumbs());</script>
    </div>
</div>

Problem is, when I view the source, it never outputs actual HTML. The source just shows that line. Is there a way to get that function to actually output HTML into the page-- partially for SEO, but also so some jQuery can interact with it ?

When you view source all you see is the code returned to the browser from the webserver without any modifcations javascript has done to the dom. To have the code in the raw source you need to generate it on the server side.

To see the generated source with the javascript modifications you can use firebug in firefox or the built in developer tools in Chrome/Safari/IE9.

This will do the trick

$(function(){
    $("#thumbs").html(generateThumbs());
});

Don't call document.write in the context of an HTML page. You should be doing something like this:

 <script type="text/javascript" language="javascript">
     document.getElementById('thumbs').innerHTML = generateThumbs();
 </script>

Try:

$('#thumbs').html(generateThumbs());