javascript - 使用 jQuery 动态插入图像

Question

我正在使用一个程序 (jAlbum) 创建一个图库，在该图库中有一个位置可以提供有关照片的更多信息。目前它只显示 Photo Info ^。我有一张图片，我想插入到包含“照片信息”字样的范围内。我会在程序中这样做，但在搜索后我找不到那个跨度(我相信它可能是用 javascript 生成的，但我找不到生成它的行)。所以我想我可以使用 jQuery 动态插入这个图像。我不确定该怎么做，因为 javascript 不是我的强项。以下是 span 的 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;
});

但在此之前我会选择其他选项