使用jQuery动态插入图像

Question

我正在使用一个程序(jAlbum)来创建一个库,在该库中它有一个地方可以获得有关该照片的更多信息.目前它只是显示Photo Info ^.我有一个图像,我想插入包含单词照片信息的跨度.我会在程序中执行此操作,但在搜索后我无法找到该范围(我相信它可能是使用javascript生成的,但我找不到生成它的行).所以我想我可以使用jQuery动态插入这个图像.我不知道如何做到这一点,因为javascript不是我的强项.以下是跨度的HTML目前的外观:

<span id="lightwindow_info_tab_span" class="up"> Photo Info</span>

以下是将图像插入代码后的样子:

<span id="lightwindow_info_tab_span" class="up"><img class="inline" 
  src="/Images/Icons/info.png" />Photo Info</span>

做这个的最好方式是什么？记住我在javascript上并不是非常强大(只是强大到足以打破东西=>)所以请提供一个例子.

Answer 1

$('#lightwindow_info_tab_span')
              .prepend('<img class="inline" src="/Images/Icons/info.png" />');

我在这里使用.prepend(),因为根据OP的帖子,图像在文本之前.

你也可以使用 .prependTo()

$('<img class="inline" src="/Images/Icons/info.png" />')
              .prependTo('#lightwindow_info_tab_span');

要么

var yourImg = $('<img/>', {
                           "class" :"inline", // or className: "inline"
                            src:"/Images/Icons/info.png"
                         });

$("#lightwindow_info_tab_span").prepend(yourImg);

你也可以使用:

$('#lightwindow_info_tab_span').html(function(index, oldHTML) {
    return '<img class="inline" src="/Images/Icons/info.png" />' + oldHTML;
});

但在此之前我会选择