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

Question

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

Tengo mi imagen src e id en una respuesta JSON (convertida a 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 añádalo a un div (vamos a llamarlo <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 .

Answer 1

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

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img')) 
img.attr('src', responseObject.imgurl); 
img.appendTo('#imagediv'); 

Answer 2

var img = $('<img />', { 
    id: 'Myid', 
    src: 'MySrc.gif', 
    alt: 'MyAlt' 
}); 
img.appendTo($('#YourDiv')); 

Answer 3

a ahorrar algo de bytes por evitar la .attr por completo al pasar las propiedades a la jQuery constructor:

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

Answer 4

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

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

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

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