¿Cómo crear una nueva etiqueta img con JQuery, con src e id de un objeto JavaScript?

87

Entiendo JQuery en el sentido básico, pero definitivamente soy nuevo en él y sospecho que esto es muy fácil.

Tengo mi imagen src e id en una respuesta JSON (convertida en un objeto) y, por lo tanto, los valores correctos en responseObject.imgurl y responseObject.imgid, y ahora me gustaría crear una imagen con ella y agregarla a un div (llamémoslo <div id="imagediv">. Estoy un poco atascado en la construcción dinámica del <img src="dynamic" id="dynamic">- la mayoría de los ejemplos que he visto implican reemplazar el src en una imagen existente, pero no tengo una imagen existente.

javascript jquery image Pedro
fuente

Respuestas:

138

En jQuery, se puede crear un nuevo elemento pasando una cadena HTML al constructor, como se muestra a continuación:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
Rob W
fuente
@ a7omiton ¿Ver fuente a través del menú contextual o mediante el inspector? El menú contextual (o Ctrl + U) muestra los datos recibidos del servidor sin los cambios realizados por JavaScript. Utilice el inspector DOM para ver el HTML activo del documento con cambios en vivo.
Rob W
Vaya, lo siento, eliminé el comentario: /, ahora aparece en las herramientas de desarrollo, la página se colgó debido al problema jquery map 404
a7omiton
Sin embargo, tiene razón en que las imágenes no aparecen en la página de origen (ctrl + u)
a7omiton
@ a7omiton Puede desactivar las advertencias 404 sobre jquery.min.map haciendo clic en el icono de engranajes en la esquina inferior derecha y desactivando la opción "Activar mapas de origen".
Rob W
Sí, solo estaba viendo la solución de paul_irish ( stackoverflow.com/questions/18365315/… ). Gracias por eso :)
a7omiton
85 
var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
Frenchi en LA
fuente
17

Ahorras algunos bytes evitando por .attrcompleto pasando las propiedades al constructor jQuery :

var img = $('<img />',
             { id: 'Myid',
               src: 'MySrc.gif', 
               width: 300
             })
              .appendTo($('#YourDiv'));
ErickMejor
fuente
2

Para aquellos que necesitan la misma función en IE 8, así es como resolví el problema:

  var myImage = $('<img/>');

               myImage.attr('width', 300);
               myImage.attr('height', 300);
               myImage.attr('class', "groupMediaPhoto");
               myImage.attr('src', photoUrl);

No pude forzar a IE8 a usar el objeto en el constructor.

Wexoni
fuente