javascript - jQuery将文本添加到放置在表格单元格中的图像

Question

我有一张简单的桌子，说

<table id="table2" border="1">
        <tr>     
           <td id='id1' style="width:300px">some content</td> 
        </tr>

 </table>

我正在使用 jQuery 向单元格添加图像，如下所示：

$('#id1').append('<img src=images/image1 class=\'floatRight\' />');

CSS 样式是这样的：

  img.floatRight { float: right; }

现在将图像添加到单元格后，我想在图像顶部添加一些文本，例如“AAA”，居中对齐，我该怎么做？谢谢

ps：“在上面”，我的意思是“覆盖”

Answer 1

试试这个 - http://jsfiddle.net/SDtpS/

.floatRight {
    float: right;
    position: relative;
}


.text {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #ddd;
    font: bold 16px sans-serif;
}

JS

$('#id1').append('<div class="floatRight"><img src="http://lorempixel.com/200/100" /></div>');

$("#id1 div").append('<span class="text">Lorem Ipsum</span>');