जावास्क्रिप्ट ऑब्जेक्ट से src और id के साथ JQuery के साथ एक नया img टैग कैसे बनाएं?


87

मैं JQuery को मूल अर्थ में समझता हूं, लेकिन निश्चित रूप से इसके लिए नया हूं, और संदेह है कि यह बहुत आसान है।

मुझे एक JSON प्रतिक्रिया (किसी ऑब्जेक्ट में परिवर्तित) में मेरी छवि src और id मिली है, और इसलिए responseObject.imgurl और responseObject.imgid में सही मान हैं, और अब मैं इसके साथ एक छवि बनाना चाहता हूं और इसे संलग्न करना चाहता हूं एक div (इसे कॉल करने देता है <div id="imagediv">। मैं गतिशील रूप से निर्माण पर थोड़ा अटक गया <img src="dynamic" id="dynamic">हूं - मैंने देखा है कि मौजूदा छवि में src को प्रतिस्थापित करना शामिल है, लेकिन मेरे पास एक मौजूदा छवि नहीं है।

जवाबों:


138

JQuery में, एक नया तत्व कंस्ट्रक्टर को HTML स्ट्रिंग पास करके बनाया जा सकता है, जैसा कि नीचे दिखाया गया है:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

@ a7omiton संदर्भ स्रोत के माध्यम से या निरीक्षक के माध्यम से देखें? Referencemenu (या Ctrl + U) जावास्क्रिप्ट द्वारा किए गए परिवर्तनों के बिना सर्वर से प्राप्त डेटा को दर्शाता है। दस्तावेज़ के सक्रिय HTML को लाइव परिवर्तनों के साथ देखने के लिए DOM निरीक्षक का उपयोग करें।
रोब डब्ल्यू

ओह, माफ करना, मैंने टिप्पणी को हटा दिया: /, यह अब देव टूल्स में दिखाई देता है, पेज 404 अंक के कारण लटका हुआ था
a7omiton

हालाँकि आप सही हैं कि चित्र स्रोत पृष्ठ पर दिखाई नहीं देते हैं (ctrl + u)
a7omiton

@ a7omiton आप नीचे-दाएं कोने में गियर आइकन पर क्लिक करके और "स्रोत मानचित्र सक्षम करें" विकल्प को अक्षम करके jquery.min.map के बारे में 404 चेतावनियों को अक्षम कर सकते हैं।
रोब डब्ल्यू

हां, मैं सिर्फ paul_irish ( stackoverflow.com/questions/18365315/… ) द्वारा समाधान देख रहा था । उस के लिए धन्यवाद :)
a7omiton


17

आप कुछ बाइट्स .attrको jQuery कंस्ट्रक्टर को संपत्तियों को पास करके पूरी तरह से बचाते हैं :

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

2

IE 8 में समान सुविधा की आवश्यकता वाले लोगों के लिए, इस तरह से मैंने समस्या हल की है:

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

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

मैं IE8 को कंस्ट्रक्टर में ऑब्जेक्ट का उपयोग करने के लिए मजबूर नहीं कर सकता था।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.