jQuery agrega imagen dentro de la etiqueta div

154

Tengo una etiqueta div

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

Me gustaría agregar una etiqueta de imagen dentro del div

Resultado final:

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

jquery

— Phill Pafford
fuente

301

Has intentado lo siguiente:

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

— Topher Fangio
fuente

10

No puedo responder a José Basilio arriba (no hay suficiente representante) pero agregarlo lo pondrá DESPUÉS de "¿Dónde está la imagen?". Anteponer lo pondrá antes.

— Topher Fangio

44

Estaba a punto de que upvote para el uso de anteponer, pero me di cuenta de que se está perdiendo '#' en su selector de ...

— Ben Koehler

1

Salté el arma con agregar. Buena atrapada. +1

— Jose Basilio

appendTo no funciona ... al menos en mi código y no era el correcto para usar después de leerlo en la página de documentos de jQuery incluso antes de publicar este hilo.

— PositiveGuy

intenté .append () y .html () para agregar la etiqueta de la imagen, pero la imagen no se carga aunque la etiqueta <img> aparece con la fuente correctamente. ¿Alguna sugerencia sobre esto?

— AnoopGoudar

52

mis 2 centavos:

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

— Kuf
fuente

Me gusta esta respuesta porque del uso de $ ('<img>'), la estaba buscando.

— usuario734028

también puede agregar atributos después de $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')

— Scott

25

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

Necesita leer la documentación aquí .

— jacobangel
fuente

10

Si queremos cambiar el contenido de la <div>etiqueta cada vez que image()se llama a la función , tenemos que hacer esto:

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
fuente

1

Le sugiero que agregue alguna explicación.

— May

1

Si queremos cambiar el contenido de la etiqueta <div>, siempre que se llame a la función image (). tenemos que hacer así / function image () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ('# imagen'). html (img); } <div id = "image"> </div> <div> <a href="javascript:image();"> Primera imagen </a> </div>

— Manjeet Kumar

6

Además de la publicación de Manjeet Kumar (no tenía la declaración)

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
fuente

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
fuente