Создать img в определенном месте

#jquery #append #attr

#jquery #добавить #attr

Вопрос:

Я пытаюсь извлечь href из тега, создать img и использовать href в качестве src. Другой человек на этом сайте помог с этой частью src = href, но у меня возникли трудности с созданием img с этим src и добавлением его в определенное место. Это определенно какая-то синтаксическая ошибка, которую я не могу понять.

Если я использую реальную ссылку для src, это несколько работает.

 $("#Results a").live('dblclick', function(event){
    if (event.type === 'dblclick') {
        var src = $(this).attr("href");
        $("#Target_Location").append('<img src=" " />').attr("src", src).addClass('DCT_Card');
    }
});
  

Что происходит, так это то, что класс получает #Target_Location , а img не создается.

Ответ №1:

 $('<img />', { 'src': src, 'class': 'DCT_Card' }).appendTo('#Target_Location');
  

jsFiddle.

Что, если мне нужно обернуть img в div с его собственным class … после #Target_Location элемента?

Попробуйте это…

 $('<img />', { 'src': src, 'class': 'DCT_Card' })
 .wrap('<div class="something" />')
 .parent()     
 .insertAfter('#Target_Location');
  

jsFiddle.

Комментарии:

1. что, если мне нужно обернуть img в div с его собственным классом?

2. @Jason Ты мог img.wrap('<div class="hello" />') .

3. @alex как бы мне совместить это с приведенным выше кодом? Также, когда я сказал добавить, я имел в виду после элемента #Target_Location, а не вставить в.

4. @Jason Вы можете вставить его после, изменив appendTo на insertAfter . Что касается объединения всего этого, см. Обновление.

5. @alex размещение и создание img идеальны, но div не создается: $(‘<img />’, {‘src’: src,’class’: ‘DCT_Card Borders’}).wrap(‘<div class=»Card_Packet» />’).insertAfter($(‘.SH_P’).parent());

Ответ №2:

Попробуйте этот код:

 $('<img/>').attr('src', src).addClass('DCT_Card').appendTo('#Target_Location');
  

Комментарии:

1. Это будет добавлено #Target_Location к этому img элементу. jsFiddle .

2. Нет… Этого не произойдет. >.< Проверьте jsfiddle @alex

3. Я полагаю, что этот HTML говорит об обратном… <img src="http://www.example.com/img.png" class="DCT_Card">#Target_Location</img>