jQuery ajoute une image à l'intérieur de la balise div

154

J'ai une balise div

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

Je voudrais ajouter une balise d'image à l'intérieur du div

Résultat final:

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

jquery Phill Pafford
la source

301

Avez-vous essayé ce qui suit:

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

Topher Fangio
la source

10

Je ne peux pas répondre à Jose Basilio ci-dessus (pas assez de rep) mais ajouter le mettra APRÈS "Où est l'image?". Prepend le mettra avant.

Topher Fangio

4

J'étais sur le point de vous voter pour l'utilisation du préfixe, mais j'ai remarqué qu'il vous manquait '#' dans votre sélecteur ...

Ben Koehler

1

J'ai sauté le pistolet avec append. Bonne prise. +1

Jose Basilio

appendTo ne fonctionne pas ... du moins dans mon code et ce n'était pas le bon à utiliser après l'avoir lu sur la page de documentation jQuery avant même de publier ce fil.

PositiveGuy

essayé .append () et .html () pour ajouter la balise image, mais l'image ne se charge pas bien que la balise <img> apparaisse correctement avec la source. Des suggestions à ce sujet?

AnoopGoudar

52

mes 2 cents:

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

Kuf
la source

j'aime cette réponse cuz de l'utilisation de $ ('<img>'), je la cherchais.

user734028

vous pouvez également ajouter des attributs après $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')

Scott

25

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

Vous devez lire la documentation ici .

Jacobangel
la source

10

Si nous voulons changer le contenu de la <div>balise chaque fois que la fonction image()est appelée, nous devons faire comme ceci:

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
la source

1

Je vous suggère d'ajouter quelques explications.

Olter le

1

Si nous voulons changer le contenu de la balise <div>, chaque fois que la fonction image () est appelée. nous devons faire comme ceci / function image () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ('# image'). html (img); } <div id = "image"> </div> <div> <a href="javascript:image();"> Première image </a> </div>

Manjeet Kumar

6

En plus du message de Manjeet Kumar (il n'avait pas la déclaration)

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
la source

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
la source

jQuery ajoute une image à l'intérieur de la balise div

Réponses: