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.