¿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

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