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」などのテキストを画像の上に中央揃えで追加したいのですが、どうすればよいですか？ありがとう

追伸：「上に」とは、「オーバーレイ」を意味します

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>');