jQuery thêm hình ảnh bên trong thẻ div


154

Tôi có thẻ div

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

Tôi muốn thêm một thẻ hình ảnh bên trong div

Kết quả cuối cùng:

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

Câu trả lời:


301

Bạn đã thử như sau:

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

10
Tôi không thể trả lời Jose Basilio ở trên (không đủ đại diện) nhưng phần bổ sung sẽ đặt nó SAU "Hình ảnh ở đâu?". Chuẩn bị sẽ đặt nó trước.
Topher Fangio

4
Tôi chuẩn bị nâng cấp bạn vì đã sử dụng trả trước, nhưng tôi nhận thấy rằng bạn đang thiếu '#' trong bộ chọn của bạn ...
Ben Koehler

1
Tôi nhảy súng với phụ lục. Nắm bắt tốt. +1
Jose Basilio

appendTo không hoạt động ... ít nhất là trong mã của tôi và nó không phải là quyền sử dụng sau khi tôi đọc nó trên trang tài liệu jQuery ngay cả trước khi đăng chủ đề này.
positiveGuy

đã thử .append () và .html () để thêm thẻ hình ảnh, nhưng hình ảnh không được tải mặc dù thẻ <img> xuất hiện cùng với nguồn chính xác. Bất kỳ đề nghị về điều này?
AnoopGoudar

52

2 xu của tôi:

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

Tôi thích câu trả lời này vì cách sử dụng $ ('<img>'), đang tìm kiếm nó.
dùng734028

bạn cũng có thể thêm các thuộc tính sau $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')
Scott


10

Nếu chúng ta muốn thay đổi nội dung của <div>thẻ bất cứ khi nào hàm image()được gọi, chúng ta phải làm như thế này:

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
Tôi đề nghị bạn thêm một số lời giải thích.
Olter

1
Nếu chúng tôi muốn thay đổi nội dung của thẻ <div>, bất cứ khi nào hàm hình ảnh () được gọi. chúng ta phải làm như thế này / function image () {var img = document.createEuity ("IMG"); img.src = "/images/img1.gif"; $ ('# hình ảnh'). html (img); } <div id = "image"> </ div> <div> <a href="javascript:image();"> Hình ảnh đầu tiên </a> </ div>
Manjeet Kumar

6

Ngoài bài đăng của Manjeet Kumar (anh ấy không có tuyên bố)

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

            }
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.