jQuery เพิ่มรูปภาพด้านในแท็ก div


154

ฉันมีแท็ก div

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

ฉันต้องการเพิ่มแท็กรูปภาพภายใน div

ผลลัพธ์สุดท้าย:

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

คำตอบ:


301

คุณลองต่อไปนี้:

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

10
ฉันไม่สามารถตอบสนองต่อ Jose Basilio ด้านบน (ตัวแทนไม่เพียงพอ) แต่ต่อท้ายจะวางไว้หลัง "ภาพอยู่ที่ไหน" การเติมจะวางไว้ก่อน
Topher Fangio

4
ผมกำลังจะ upvote ที่ใช้ย่อหน้า แต่ผมสังเกตเห็นว่าคุณกำลังขาดหายไป '#' ในตัวเลือกของคุณ ...
เบนซานโตส

1
ฉันกระโดดปืนด้วยการผนวก จับดี. +1
Jose Basilio

ผนวกเพื่อไม่ทำงาน ... อย่างน้อยในรหัสของฉันและมันไม่ถูกต้องที่จะใช้หลังจากที่ฉันอ่านในหน้าเอกสาร jQuery ก่อนที่จะโพสต์หัวข้อนี้
PositiveGuy

พยายาม. append () และ. html () เพื่อเพิ่มแท็กรูปภาพ แต่รูปภาพไม่โหลดแม้ว่าแท็ก <img> จะปรากฏขึ้นพร้อมกับแหล่งที่มาอย่างถูกต้อง ข้อเสนอแนะใด ๆ เกี่ยวกับเรื่องนี้?
AnoopGoudar

52

2 เซนต์ของฉัน:

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

ฉันชอบคำตอบนี้เพราะการใช้งาน $ ('<img>') ถูกมองหา
user734028

คุณสามารถเพิ่มแอททริบิวต์ได้หลังจาก $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')
Scott


10

ถ้าเราต้องการเปลี่ยนเนื้อหาของ<div>แท็กเมื่อใดก็ตามที่image()เรียกใช้ฟังก์ชันเราต้องทำดังนี้:

จาวาสคริ

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
ฉันแนะนำให้คุณเพิ่มคำอธิบาย
โอลเตอร์

1
หากเราต้องการเปลี่ยนเนื้อหาของแท็ก <div> ทุกครั้งที่เรียกใช้ฟังก์ชันอิมเมจ () เราต้องทำเช่นนี้ / ภาพฟังก์ชั่น () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ( '# ภาพ') HTML (img). } <div id = "image"> </div> <div> <a href="javascript:image();"> ภาพแรก </a> </div>
Manjeet Kumar

6

นอกจากโพสต์ของ Manjeet Kumar (เขาไม่มีคำชี้แจง)

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

            }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.