使用 jQuery 动态插入图像

Insert Image Dynamically with jQuery

本文关键字：图像 插入 动态 jQuery 使用      更新时间：2023-09-26

我正在使用一个程序（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方面不是很强（只是强大到足以破坏东西=>），所以请提供一个例子。

$('#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;
});

但在此之前我会选择选项

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

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