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

Question

Je comprends JQuery dans son sens le plus élémentaire, mais je suis vraiment novice en la matière, et je pense que c'est très facile.

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

Answer 1

Dans jQuery, un nouvel élément peut être créé en passant 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');

Answer 2

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

Answer 3

Vous économisez quelques octets en évitant le .attr en passant les propriétés à la fonction Constructeur jQuery :

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

Answer 4

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 n'ai pas pu forcer IE8 à utiliser un objet dans le constructeur.