如何在div中添加img元素

Question

我尝试动态创建'img'元素并将其插入到现有div中，但失败了。有没有人知道如何用原型框架做到这一点？ 以下是我的尝试：

案例1：所有HTML都没问题。

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

案例2：没有图像显示。

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

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

Answer 1

我注意到你正在使用Prototype。您可以使用Element#update执行该操作，该Element#insert将使用您提供的内容替换div的所有内容：

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

...或{{3}}，将添加到内容：

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

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