jQuery div etiketinin içine resim ekle


154

Div etiketim var

<div id="theDiv">Where is the image?</div>

Div'ın içine resim etiketi eklemek istiyorum

Sonuç:

<div id="theDiv"><img id="theImg"  src="theImg.png" />Where is the image?</div>

Yanıtlar:


301

Aşağıdakileri denediniz mi:

$('#theDiv').prepend('<img id="theImg" src="theImg.png" />')

10
Yukarıdaki Jose Basilio cevap veremem (yeterli temsilcisi değil) ama sonuna "görüntü nerede?" Başına daha önce koyacağız.
Topher Fangio

4
Başından beri kullandığınız için sizi oylamak üzereydim, ama seçicinizde '#' eksik olduğunu fark ettim ...
Ben Koehler

1
Silahı ucuyla atladım. İyi yakalama. +1
Jose Basilio

appendTo çalışmıyor ... en azından benim kodumda ve ben bu konu göndermeden önce bile jQuery docs sayfasında okuduktan sonra kullanmak için doğru değildi.
PositiveGuy

resim etiketini eklemek için .append () ve .html () yöntemlerini denedi, ancak <img> etiketi kaynakla düzgün bir şekilde göründüğü halde resim yüklenmiyor. Bu konuda herhangi bir öneriniz var mı?
AnoopGoudar

52

benim 2 sent:

$('#theDiv').prepend($('<img>',{id:'theImg',src:'theImg.png'}))

Bu cevabı beğendim çünkü $ ('<img>') kullanımı, onu arıyordu.
user734028

Ayrıca $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png') 'den sonra özellikler ekleyebilirsiniz
Scott


10

<div>İşlev image()çağrıldığında etiket içeriğini değiştirmek istiyorsak , bunu yapmak zorundayız:

JavaScript

function image() {
    var img = document.createElement("IMG");
    img.src = "/images/img1.gif";
    $('#image').html(img); 
}

HTML

<div id="image"></div>
<div><a href="javascript:image();">First Image</a></div>

1
Biraz açıklama eklemenizi öneririm.
Olter

1
<div> etiketinin içeriğini değiştirmek istiyorsak, işlev resmi () her çağrıldığında. bunu yapmak zorundayız / function image () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ( '# görsel') html (img).; } <div id = "image"> </div> <div> <a href="javascript:image();"> İlk Resim </a> </div>
Manjeet Kumar

6

Manjeet Kumar'ın görevine ek olarak (beyanı yoktu)

var image = document.createElement("IMG");
image.alt = "Alt information for image";
image.setAttribute('class', 'photo');
image.src="/images/abc.jpg";
$(#TheDiv).html(image);

2
var img;
for (var i = 0; i < jQuery('.MulImage').length; i++) {
                var imgsrc = jQuery('.MulImage')[i];
                var CurrentImgSrc = imgsrc.src;
                img = jQuery('<img class="dynamic" style="width:100%;">');
                img.attr('src', CurrentImgSrc);
                jQuery('.YourDivClass').append(img);

            }
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.