jQuery Bild innerhalb des div-Tags hinzufügen

154

Ich habe ein Div-Tag

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

Ich möchte ein Bild-Tag innerhalb des div hinzufügen

Endresultat:

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

jquery

— Phill Pafford
quelle

301

Haben Sie Folgendes versucht:

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

— Topher Fangio
quelle

10

Ich kann nicht auf Jose Basilio oben antworten (nicht genug Wiederholung), aber das Anhängen wird es NACH "Wo ist das Bild?" Prepend wird es vorher setzen.

— Topher Fangio

4

Ich wollte Sie für die Verwendung von Prepend positiv bewerten, aber ich habe festgestellt, dass in Ihrem Selektor '#' fehlt ...

— Ben Koehler

1

Ich sprang die Waffe mit Anhang. Guter Fang. +1

— Jose Basilio

appendTo funktioniert nicht ... zumindest in meinem Code und es war nicht die richtige, nachdem ich es auf der jQuery-Dokumentenseite gelesen habe, noch bevor ich diesen Thread gepostet habe.

— PositiveGuy

Es wurde versucht, mit .append () und .html () das Bild-Tag hinzuzufügen, aber das Bild wird nicht geladen, obwohl das <img> -Tag mit der Quelle ordnungsgemäß angezeigt wird. Irgendwelche Vorschläge dazu?

— AnoopGoudar

52

meine 2 Cent:

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

— Kuf
quelle

Ich mag diese Antwort, weil die Verwendung von $ ('<img>') danach gesucht hat.

— user734028

Sie können Attribute auch nach $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png') hinzufügen

— Scott

25

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

Sie müssen die Dokumentation hier lesen .

— Jacobangel
quelle

10

Wenn wir den Inhalt des <div>Tags bei jedem image()Aufruf der Funktion ändern möchten , müssen wir Folgendes tun:

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
quelle

1

I suggest you to add some explanation.

— Olter

1

If we want to change the content of <div>tag,whenever the function image()is called. we have to do like this/ function image() { var img = document.createElement("IMG"); img.src = "/images/img1.gif"; $('#image').html(img); } <div id="image"></div> <div><a href="javascript:image();">First Image</a></div>

— Manjeet Kumar

6

In addition to Manjeet Kumar's post (he didn't have the declaration)

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
quelle

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
quelle