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

Jawaban:

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