web-dev-qa-db-fra.com

Comment créer une nouvelle balise img avec JQuery, avec le src et l'id d'un objet JavaScript?

Je comprends JQuery au sens fondamental du terme, mais je suis définitivement nouveau, et je suppose que cela est très facile.

J'ai mes src et identificateurs d'image dans une réponse JSON (convertie en objet), et donc les valeurs correctes dans responseObject.imgurl et responseObject.imgid, et j'aimerais maintenant créer une image avec celle-ci et l'ajouter à un div (appelons-le <div id="imagediv">. Je suis un peu coincé sur la construction dynamique du <img src="dynamic" id="dynamic"> _ - la plupart des exemples que j'ai vus impliquent le remplacement du src sur une image existante, mais je n'ai pas d'image existante.

javascriptjqueryimage
85
Peter

Dans jQuery, vous pouvez créer un nouvel élément en transmettant une chaîne HTML au constructeur, comme indiqué ci-dessous:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
133
Rob W
var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
82
Frenchi In LA

Vous économisez des octets en évitant le .attr _ complètement en passant les propriétés au constructeur jQuery :

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

Pour ceux qui ont besoin de la même fonctionnalité dans IE 8, voici comment j'ai résolu le problème:

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

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

Je ne pouvais pas forcer IE8 à utiliser un objet dans le constructeur.

2
Vedran Maricevic.