Wie erstelle ich mit JQuery ein neues img-Tag mit src und id aus einem JavaScript-Objekt?

86

Ich verstehe JQuery im grundlegenden Sinne, bin aber definitiv neu darin und vermute, dass dies sehr einfach ist.

Ich habe mein Bild src und id in einer JSON-Antwort (in ein Objekt konvertiert) und daher die richtigen Werte in responseObject.imgurl und responseObject.imgid. Jetzt möchte ich ein Bild damit erstellen und anhängen a div (nennen wir es so <div id="imagediv">. Ich bin ein bisschen festgefahren, das dynamisch zu erstellen <img src="dynamic" id="dynamic">- die meisten Beispiele, die ich gesehen habe, beinhalten das Ersetzen des src für ein vorhandenes Image, aber ich habe kein vorhandenes Image.

javascript jquery image Peter
quelle

Antworten:

137

In jQuery kann ein neues Element erstellt werden, indem eine HTML-Zeichenfolge an den Konstruktor übergeben wird, wie unten gezeigt:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
Rob W.
quelle
@ a7omiton Quelle über Kontextmenü oder über den Inspektor anzeigen? Das Kontextmenü (oder Strg + U) zeigt die vom Server empfangenen Daten ohne die von JavaScript vorgenommenen Änderungen an. Verwenden Sie den DOM-Inspektor, um den aktiven HTML-Code des Dokuments mit Live-Änderungen anzuzeigen.
Rob W
Hoppla, tut mir leid, ich habe den Kommentar gelöscht: /, er wird jetzt in den Entwicklertools angezeigt. Die Seite hing aufgrund des Problems mit der jquery map 404
a7omiton
Sie haben jedoch Recht, dass die Bilder nicht auf der Quellseite angezeigt werden (Strg + u)
a7omiton
@ a7omiton Sie können die 404-Warnungen zu jquery.min.map deaktivieren, indem Sie auf das Zahnradsymbol in der unteren rechten Ecke klicken und die Option "Quellkarten aktivieren" deaktivieren.
Rob W
Ja, ich habe mir gerade die Lösung von paul_irish ( stackoverflow.com/questions/18365315/… ) angesehen. Danke dafür :)
a7omiton
84 
var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
Frenchi In LA
quelle
17

Sie sparen einige Bytes, indem Sie das .attrGanze vermeiden, indem Sie die Eigenschaften an den jQuery-Konstruktor übergeben :

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

Für diejenigen, die dieselbe Funktion in IE 8 benötigen, habe ich das Problem folgendermaßen gelöst:

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

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

Ich konnte IE8 nicht zwingen, Objekt im Konstruktor zu verwenden.

Vedran Maricevic.
quelle