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

jQuery Bild innerhalb des div-Tags hinzufügen

Antworten: