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

87

Capisco JQuery nel senso di base, ma sono decisamente nuovo e sospetto che sia molto facile.

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 vorrei creare un'immagine con essa e aggiungerla a a div (chiamiamolo <div id="imagediv">. Sono un po 'bloccato nel costruire dinamicamente il <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.

javascript jquery image

— Peter
fonte

138

In jQuery, è possibile creare un nuovo elemento passando una stringa HTML al costruttore, come mostrato di seguito:

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

— Rob W
fonte

@ a7omiton Visualizzare la sorgente tramite il menu contestuale o tramite l'ispettore? Il menu contestuale (o Ctrl + U) mostra i dati ricevuti dal server senza le modifiche apportate da JavaScript. Usa l'ispettore DOM per vedere l'HTML attivo del documento con le modifiche in tempo reale.

— Rob W

Spiacenti, ho cancellato il commento: /, ora viene visualizzato negli strumenti di sviluppo, la pagina era

— bloccata a

Hai ragione, tuttavia, le immagini non vengono visualizzate nella pagina di origine (ctrl + u)

— a7omiton

@ a7omiton Puoi disabilitare gli avvisi 404 su jquery.min.map facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a destra e disabilitando l'opzione "Abilita mappe di origine".

— Rob W

Sì, stavo guardando la soluzione paul_irish ( stackoverflow.com/questions/18365315/... ). Grazie per questo :)

— a7omiton

85

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

— Frenchi In LA
fonte

17

Risparmi alcuni byte evitando del .attrtutto passando le proprietà al costruttore jQuery :

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

— ErickBest
fonte

2

Per coloro che necessitano della stessa funzionalità in IE 8, ecco 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.

— Wexoni
fonte