jQuery dodaje obraz wewnątrz znacznika DIV

154

Mam znacznik DIV

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

Chciałbym dodać tag obrazu wewnątrz elementu div

Wynik końcowy:

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

jquery

— Phill Pafford
źródło

301

Czy próbowałeś następujących rzeczy:

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

— Topher Fangio
źródło

10

Nie mogę odpowiedzieć Jose Basilio powyżej (za mało powtórzeń), ale dopisuje to PO „Gdzie jest obraz?”. Prepend umieści to wcześniej.

— Topher Fangio

4

Chciałem Cię zagłosować za używanie przedprzedzania, ale zauważyłem, że brakuje Ci znaku „#” w selektorze ...

— Ben Koehler

1

Skoczyłem z pistoletu z dopiskiem. Dobry chwyt. +1

— Jose Basilio

appendTo nie działa ... przynajmniej w moim kodzie i nie był to właściwy do użycia po tym, jak przeczytałem go na stronie dokumentacji jQuery, nawet przed wysłaniem tego wątku.

— PositiveGuy

próbował .append () i .html (), aby dodać tag obrazu, ale obraz nie ładuje się, mimo że znacznik <img> pojawia się prawidłowo ze źródłem. Jakieś sugestie w tej sprawie?

— AnoopGoudar

52

moje 2 centy:

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

— Kuf
źródło

Podoba mi się ta odpowiedź, ponieważ użycie $ ('<img>'), szukałem jej.

— user734028

możesz również dodać atrybuty po $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')

— Scott

25

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

Musisz przeczytać dokumentację tutaj .

— Jacobangel
źródło

10

Jeśli chcemy zmienić zawartość <div>tagu przy każdym wywołaniu funkcji image(), musimy zrobić to w następujący sposób:

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
źródło

1

Proponuję dodać jakieś wyjaśnienie.

— Olter,

1

Jeśli chcemy zmienić zawartość tagu <div>, przy każdym wywołaniu funkcji image (). musimy zrobić w ten sposób / function image () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ('# obraz'). html (img); } <div id = "image"> </div> <div> <a href="javascript:image();"> Pierwszy obraz </a> </div>

— Manjeet Kumar

6

Oprócz stanowiska Manjeeta Kumara (nie miał deklaracji)

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
źródło

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
źródło