Jak stworzyć nowy tag img za pomocą JQuery, z src i id z obiektu JavaScript?

87

Rozumiem JQuery w podstawowym sensie, ale jestem w nim zdecydowanie nowy i podejrzewam, że jest to bardzo łatwe.

Mam mój obraz src i id w odpowiedzi JSON (przekonwertowanej na obiekt), a zatem prawidłowe wartości w responseObject.imgurl i responseObject.imgid, a teraz chciałbym utworzyć obraz z nim i dołączyć go do a div (nazwijmy to <div id="imagediv">. Trochę utknąłem na dynamicznym budowaniu <img src="dynamic" id="dynamic">- większość przykładów, które widziałem, dotyczy zastąpienia src na istniejącym obrazie, ale nie mam istniejącego obrazu).

javascript jquery image Piotr
źródło

Odpowiedzi:

138

W jQuery można utworzyć nowy element, przekazując ciąg HTML do konstruktora, jak pokazano poniżej:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
Rob W
źródło
@ a7omiton Wyświetlić źródło przez menu kontekstowe czy przez inspektora? Menu kontekstowe (lub Ctrl + U) pokazuje dane otrzymane z serwera bez zmian wprowadzonych przez JavaScript. Użyj inspektora DOM, aby zobaczyć aktywny kod HTML dokumentu ze zmianami na żywo.
Rob W
Ups, przepraszam, usunąłem komentarz: /, teraz pojawia się w narzędziach programistycznych, strona
zawiesiła się
Masz jednak rację, że obrazy nie pojawiają się na stronie źródłowej (ctrl + u)
a7omiton
@ a7omiton Możesz wyłączyć ostrzeżenia 404 dotyczące jquery.min.map, klikając ikonę koła zębatego w prawym dolnym rogu i wyłączając opcję „Włącz mapy źródłowe”.
Rob W
Tak, właśnie przyglądałem się rozwiązaniu autorstwa paul_irish ( stackoverflow.com/questions/18365315/… ). Dzięki za to :)
a7omiton
85 
var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
Frenchi w LA
źródło
17

Możesz zaoszczędzić trochę bajtów, unikając ich .attrcałkowicie, przekazując właściwości do konstruktora jQuery :

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

Dla tych, którzy potrzebują tej samej funkcji w IE 8, oto jak rozwiązałem problem:

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

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

Nie mogłem zmusić IE8 do używania obiektu w konstruktorze.

Wexoni
źródło