Bagaimana cara membuat tag img baru dengan JQuery, dengan src dan id dari objek JavaScript?

87

Saya memahami JQuery dalam arti dasar tetapi saya benar-benar baru mengenalnya, dan menduga ini sangat mudah.

Saya mendapatkan src dan id gambar saya dalam respons JSON (diubah menjadi objek), dan oleh karena itu nilai yang benar di responseObject.imgurl dan responseObject.imgid, dan sekarang saya ingin membuat gambar dengannya dan menambahkannya ke sebuah div (sebut saja <div id="imagediv">. Saya agak terjebak dalam membangun secara dinamis <img src="dynamic" id="dynamic">- sebagian besar contoh yang saya lihat melibatkan penggantian src pada gambar yang ada, tetapi saya tidak memiliki gambar yang ada.

javascript jquery image Peter
sumber

Jawaban:

138

Di jQuery, elemen baru dapat dibuat dengan meneruskan string HTML ke konstruktor, seperti yang ditunjukkan di bawah ini:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
Rob W.
sumber
@ a7omiton Lihat sumber melalui menu konteks atau melalui inspektur? Menu konteks (atau Ctrl + U) menampilkan data yang diterima dari server tanpa perubahan yang dibuat oleh JavaScript. Gunakan pemeriksa DOM untuk melihat HTML aktif dokumen dengan perubahan langsung.
Rob W
Ups, maaf, saya menghapus komentar: /, komentar itu muncul di alat dev sekarang, halamannya hang karena masalah jquery map 404
a7omiton
Namun Anda benar bahwa gambar tidak muncul di halaman sumber (ctrl + u)
a7omiton
@ a7omiton Anda dapat menonaktifkan peringatan 404 tentang jquery.min.map dengan mengklik ikon roda gigi di sudut kanan bawah dan menonaktifkan opsi "Aktifkan peta sumber".
Rob W
Ya, saya baru saja melihat solusi dari paul_irish ( stackoverflow.com/questions/18365315/… ). Terima kasih untuk itu :)
a7omiton
86 
var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
Frenchi Di LA
sumber
17

Anda menghemat beberapa byte dengan menghindari .attrsemuanya dengan meneruskan properti ke konstruktor jQuery :

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

Bagi mereka yang membutuhkan fitur yang sama di IE 8, inilah cara saya menyelesaikan masalah:

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

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

Saya tidak bisa memaksa IE8 untuk menggunakan objek di konstruktor.

Wexoni
sumber