How to add an img element in div

Question

I try to dynamically create an 'img' element and insert it into an existing div, but failed. Does any one know how to do this with prototype framework? Below is what I've tried:

Case1: All html is fine.

<!-- html -->
<div id="thumbnailFrame" class="thumbnailFrameDiv">
    <img src="image.png" /> 
</div>

Case2: No image show up.

<!-- html -->
<div id="thumbnailFrame" class="thumbnailFrameDiv"> 
</div>

<!-- JS -->
var eleImg = new Element('img');
$('thumbnailFrame').insert(eleImg, {src:"image.png"});

Answer 1

I note you're using Prototype. You can do that using Element#update , which will replace all of the contents of the div with what you give it:

$("thumbnailFrame").update('<img src="image.png"></img>');

...or with Element#insert , which will add to the content:

// At the bottom (default)
$("thumbnailFrame").insert('<img src="image.png"></img>');

// At the top
$("thumbnailFrame").insert({top: '<img src="image.png"></img>'});