Changing div content on page load

Question

I'm looking for a solution, in which div content changes on page load, randomly. Much like a JavaScript image on page load. I have made further notes in the code below.

I could do a randomize the content like images with JavaScript on page load, but here it's divs and I'm not sure how to change content inside them.

<div class="row BSlots">
    <div class="Grid_4 fl">
        /* This would be the code which would change */
        /* For example once it would be <div class="hello"><p>Hi</p></div> and the other <iframe="Link"/> */
    </div>
    <div class="Grid_4 fr">
        <script>Widget2(); /* Don't mind this, loading an actual JS image randomizer here */</script>
    </div>
</div>

Can this be achieved without using JS? If not, I'd appreciate a basic example which I could fiddle with :)

Answer 1

Yes it could be achieved without Javascript. It depends on which serverside-technology you use. You could create a template and insert serverside ransom image-tags. It is possible too, to do it via javascript. If you want to use jQuery, you could do something like:

$(function(){
  $(".Grid_4 fl").html(generateRandomImageHtml());
});