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

87

Je comprends JQuery au sens de base, mais je suis définitivement nouveau dans ce domaine et je soupçonne que c'est très facile.

J'ai mon image src et mon id 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 elle 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 de remplacer le src sur une image existante, mais je n'ai pas d'image existante.

javascript jquery image

— Peter
source

138

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');

— Rob W
source

@ a7omiton Afficher la source via le menu contextuel ou via l'inspecteur? Le menu contextuel (ou Ctrl + U) affiche les données reçues du serveur sans les modifications apportées par JavaScript. Utilisez l'inspecteur DOM pour voir le code HTML actif du document avec les modifications en direct.

— Rob W

Oups, désolé, j'ai supprimé le commentaire: /, il apparaît maintenant dans les outils de développement, la page était suspendue à cause du problème de jquery map 404

— a7omiton

Vous avez raison cependant que les images n'apparaissent pas sur la page source (ctrl + u)

— a7omiton

@ a7omiton Vous pouvez désactiver les avertissements 404 concernant jquery.min.map en cliquant sur l'icône d'engrenages dans le coin inférieur droit et en désactivant l'option "Activer les cartes source".

— Rob W

Oui, je regardais juste la solution par paul_irish ( stackoverflow.com/questions/18365315/… ). Merci pour ça :)

— a7omiton

85

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

— Frenchi à LA
source

17

Vous économisez certains octets en évitant le .attrtout en passant les propriétés au constructeur jQuery :

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

— ErickBest
source

2

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.

— Wexoni
source