javascript - 如何在div中添加一个img元素

Question

我尝试动态创建一个“img”元素并将其插入到现有的 div 中，但失败了。有谁知道如何使用原型(prototype)框架来做到这一点？以下是我尝试过的:

Case1:所有html都可以。

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

Case2:没有图片显示。

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

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

Answer 1

我注意到您使用的是 Prototype。您可以使用 Element#update 来做到这一点，这将用您提供的内容替换 div 的所有内容:

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

...或使用 Element#insert ，这将添加到内容:

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

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