用jQuery動態插入圖片

我正在使用程序（jAlbum）創建一個圖庫，並在該圖庫中有一個地方提供有關該照片的更多信息。目前它只顯示Photo Info ^。我想要插入包含單詞照片信息的跨度中的圖像。我會在程序中做到這一點，但搜索後我無法找到跨度（我相信它可能會生成與JavaScript，但我找不到生成它的行）。所以我想我可以使用jQuery動態插入此圖像。我不知道如何做到這一點，因爲JavaScript不是我的強項。下面是跨度HTML的外觀目前：用jQuery動態插入圖片

<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（只是強大到足以打破東西=>），所以請舉個例子。

來源

2012-05-28 L84

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

但我會去的選項，在此之前

來源

2012-05-28 18:27:26 thecodeparadox

感謝您的幫助，我已經嘗試列出的第一個代碼，它不起作用。我沒有在頁面上發現任何錯誤，只是沒有圖標。 – L84

@Lynda您的圖像插入代碼不在'$ j（document）.ready（）'函數之外。把上面的代碼放在那個函數中，我認爲它可以正常工作 – thecodeparadox

感謝您的幫助，這沒有奏效，我認爲它與其他一些腳本相沖突。我之前有過這個問題，沒有發生錯誤，但它不起作用。爲了解決這個問題，我遇到了我可以編輯插入我的圖標的程序中的代碼。所以現在我不需要jQuery解決方案。感謝您對我的問題提供的幫助和幫助。 => – L84

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

來源

2012-05-28 18:24:45 adeneo

我想你想''.prepend（）'不是'.append（）'。 http://api.jquery.com/prepend/ – Cheeso

@Cheeso - 你是對的，只是想通了！ – adeneo

@adeneo'class'不能使用，你應該使用''class「'或'className' – thecodeparadox

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

來源

2012-05-28 18:25:52 Musa

用jQuery動態插入圖片

回答

相關問題