Вставить изображение динамически с помощью 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()' not '.append()'. http://api.jquery.com/prepend/ – 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

ответ

Смежные вопросы