Jak utworzyć nowy znacznik IMG w JQuery, z src i id z obiektu JavaScript?

Question

Rozumiem JQuery w podstawowym tego słowa znaczeniu, ale jestem zdecydowanie nowy i podejrzewam, że jest to bardzo łatwe.

Mam obraz src i id w odpowiedzi JSON (przekonwertowany na obiekt), a zatem poprawne wartości w responseObject.imgurl i responseObject.imgid, a teraz chciałbym utworzyć z nim obraz i dołącz go do elementu div (można go nazwać: <div id="imagediv">.) Utknąłem na dynamicznym budowaniu modelu <img src="dynamic" id="dynamic"> - większość przykładów, które widziałem, dotyczy zastąpienia src istniejącym obrazem, ale nie mam istniejącego obrazu .

Answer 1

w jQuery, nowy element może być utworzony przez przechodzą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'); 

Answer 2

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

Answer 3

zaoszczędzić kilka bajtów przez unikanie .attr całkowicie przez przekazanie własności do jQuery constructor:

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

Answer 4

Dla tych, którzy potrzebują takiej samej funkcji w IE 8, to w jaki sposób rozwiązać ten 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życia obiektu w konstruktorze.