javascript 使用 jQuery 动态插入图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10788872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert Image Dynamically with jQuery
提问by L84
I am using a program (jAlbum) to create a gallery and in that gallery it has a place for more information about the photo. Currently it just displays Photo Info ^. I have an image I would like to insert into the span that contains the words Photo Info. I would do this in the program but after searching I cannot find that span (I believe it might be generated with javascript but I cannot find the line that generates it). So I figured I can insert this image dynamically using jQuery. I am not sure how to do this as javascript is not my strong suit. Here is how the HTML for the span looks currently:
我正在使用一个程序 (jAlbum) 来创建一个画廊，并且在该画廊中，它有一个地方可以提供有关照片的更多信息。目前它只显示Photo Info ^. 我有一张图片，我想插入到包含“照片信息”字样的跨度中。我会在程序中执行此操作，但在搜索后我找不到那个跨度（我相信它可能是用 javascript 生成的，但我找不到生成它的行）。所以我想我可以使用 jQuery 动态插入这个图像。我不确定如何执行此操作，因为 javascript 不是我的强项。以下是当前跨度的 HTML 的外观：
<span id="lightwindow_info_tab_span" class="up"> Photo Info</span>
Here is how it should look after the image is inserted into the code:
以下是将图像插入代码后的外观：
<span id="lightwindow_info_tab_span" class="up"><img class="inline"
src="/Images/Icons/info.png" />Photo Info</span>
What is the best way to do this? Remember I am not super strong at javascript (just strong enough to break stuff => ) so please provide an example.
做这个的最好方式是什么？请记住，我在 javascript 方面不是特别强（只是足以破坏东西 => ）所以请提供一个例子。
回答by thecodeparadox
$('#lightwindow_info_tab_span')
.prepend('<img class="inline" src="/Images/Icons/info.png" />');
Here I use .prepend(), because according to OP's post, the image is before the Text.
我在这里使用.prepend()，因为根据 OP 的帖子，图像在文本之前。
You can also use .prependTo()
你也可以使用 .prependTo()
$('<img class="inline" src="/Images/Icons/info.png" />')
.prependTo('#lightwindow_info_tab_span');
or
或者
var yourImg = $('<img/>', {
"class" :"inline", // or className: "inline"
src:"/Images/Icons/info.png"
});
$("#lightwindow_info_tab_span").prepend(yourImg);
You could also use:
您还可以使用：
$('#lightwindow_info_tab_span').html(function(index, oldHTML) {
return '<img class="inline" src="/Images/Icons/info.png" />' + oldHTML;
});
But I would go for options before this
但在此之前我会去寻找选择
回答by adeneo
var img = $('<img class="inline" src="/Images/Icons/info.png" />');
$("#lightwindow_info_tab_span").prepend(img);
or
或者
var img = $('<img/>', {"class" :"inline", src:"/Images/Icons/info.png"});
$("#lightwindow_info_tab_span").prepend(img);
回答by Musa
$('<img class="inline" src="/Images/Icons/info.png" />').prependTo("#lightwindow_info_tab_span")
