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

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