jQuery menambahkan gambar di dalam tag div

154

Saya memiliki tag div

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

Saya ingin menambahkan tag gambar di dalam div

Hasil akhir:

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

jquery

— Phill Pafford
sumber

301

Sudahkah Anda mencoba yang berikut ini:

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

— Topher Fangio
sumber

10

Saya tidak bisa menanggapi Jose Basilio di atas (tidak cukup perwakilan) tetapi menambahkan akan menempatkan SETELAH "Di mana gambar?". Prepend akan meletakkannya sebelumnya.

— Topher Fangio

4

Aku hendak upvote Anda untuk menggunakan tambahkan, tapi saya melihat bahwa Anda kehilangan '#' di selector Anda ...

— Ben Koehler

1

Saya melompat pistol dengan menambahkan. Tangkapan yang bagus. +1

— Jose Basilio

appendTo tidak berfungsi ... setidaknya dalam kode saya dan itu bukan yang tepat untuk digunakan setelah saya membacanya di halaman dokumen jQuery bahkan sebelum memposting utas ini.

— PositiveGuy

mencoba .append () dan .html () untuk menambahkan tag gambar, tetapi gambar tidak memuat meskipun tag <img> muncul dengan sumber dengan benar. Ada saran tentang ini?

— AnoopGoudar

52

2 sen saya:

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

— Kuf
sumber

Saya suka jawaban ini karena penggunaan $ ('<img>'), mencarinya.

— user734028

Anda juga dapat menambahkan atribut setelah $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')

— Scott

25

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

Anda perlu membaca dokumentasi di sini .

— Jacobsangel
sumber

10

Jika kita ingin mengubah konten <div>tag setiap kali fungsi image()dipanggil, kita harus melakukan seperti ini:

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>

— Manjeet Kumar
sumber

1

Saya sarankan Anda untuk menambahkan beberapa penjelasan.

— Olter

1

Jika kami ingin mengubah konten tag <div>, setiap kali gambar fungsi () dipanggil. kita harus melakukan ini seperti / gambar fungsi () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ('# image'). html (img); } <div id = "image"> </div> <div> <a href="javascript:image();"> Gambar Pertama </a> </div>

— Manjeet Kumar

6

Selain posting Manjeet Kumar (dia tidak memiliki deklarasi)

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

— Evan Parsons
sumber

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

            }

— Anand rao
sumber