Come creare un nuovo tag img con JQuery, con src e id da un oggetto JavaScript?

Question

Capisco JQuery nel senso fondamentale, ma sono decisamente nuovo ad esso, e sospetto che sia molto semplice.

Ho la mia immagine src e id in una risposta JSON (convertita in un oggetto), e quindi i valori corretti in responseObject.imgurl e responseObject.imgid, e ora mi piacerebbe creare un'immagine con esso e aggiungilo a un div (chiamiamolo come <div id="imagediv">. Sono un po 'bloccato per creare dinamicamente lo <img src="dynamic" id="dynamic"> - la maggior parte degli esempi che ho visto riguardano la sostituzione di src su un'immagine esistente, ma non ho un'immagine esistente .

Answer 1

In jQuery, un nuovo elemento può essere creato passando una stringa HTML al costruttore, come illustrato di seguito:

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

Risparmi alcuni byte evitando il .attr del tutto passando le proprietà al jQuery constructor:

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

Answer 4

Per coloro che hanno bisogno la stessa caratteristica in IE 8, questo è come ho risolto il problema:

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

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

Non ho potuto forzare IE8 a utilizzare l'oggetto nel costruttore.