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
source

301

Avez-vous essayé ce qui suit:

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

— Topher Fangio
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
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
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
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
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
source