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上并不是非常强大（只是强大到足以打破东西=＆gt;）所以请提供一个例子。

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

但我会在此之前选择

Answer 2

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

或

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

Answer 3

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

使用jQuery动态插入图像

3 个答案: