2011-12-22 17 views
15

मेरे यहां एक साधारण सवाल है। मैं जानता हूँ कि jQuery के साथ गतिशीलjQuery डीओएम दृश्य स्रोत में दिखाई नहीं दे रहा है

$('').append('<p>Test</p>'); 

की तरह काम करना DOM में खोजा HTML तत्वों जोड़ सकते हैं लेकिन मेरा सवाल है, यही वजह है कि इन तत्वों वास्तव में कोड में नेत्रहीन प्रकट नहीं होते हैं (जब के लिए आपके ब्राउज़र में आप स्रोत देखें उदाहरण)।

कृपया विशेषज्ञों, मुझे बताएं क्यों। धन्यवाद

+0

उपयोग [फ़ायरबग] (http://getfirebug.com/) के बजाय .. –

+0

धन्यवाद, फ़ायरबग awesone है। अच्छे उत्तरों के लिए सभी को धन्यवाद – user765368

उत्तर

22

मूल स्रोत कभी नहीं बदलता है। केवल डोम बदलता है।

आप अपने ब्राउज़र के डेवलपर टूल का उपयोग करके डीओएम परिवर्तनों का एक HTML विज़ुअलाइजेशन देख सकते हैं।

आपको अवगत होना चाहिए कि जब आप डोम में हेरफेर करते हैं, तो आप कभी भी HTML में हेरफेर नहीं कर रहे हैं। डेवलपर टूल द्वारा प्रदान की गई एचटीएमएल विज़ुअलाइजेशन डीओएम की वर्तमान स्थिति का व्याख्या है। एचटीएमएल मार्कअप का कोई वास्तविक संशोधन नहीं है।

+4

+1 लेकिन Google जैसे खोज इंजन के roobots के बारे में क्या? क्या यह सामग्री जो मैं उदाहरण के लिए AJAX GET के माध्यम से कुछ आराम एपीआई से प्राप्त करता हूं? – andi

+0

यह मेरा प्रश्न भी है? कैसे? @andi –

7

क्योंकि स्रोत केवल HTML को दिखाता है जो मूल रूप से ब्राउज़र पर भेजा गया था। हालांकि परिवर्तित एचटीएमएल देखने के तरीके हैं - फ़ायरफ़ॉक्स में फायरबग, आईई या क्रोम में एफ 12 डेवलपर टूल्स। फ़ायरफ़ॉक्स में कुछ HTML चुनना और "चयन चयन स्रोत" पर राइट-क्लिक करना भी काम करेगा।

4

"स्रोत देखें" केवल उस सर्वर को स्रोत दिखाता है जब ब्राउज़र ने सर्वर से विशेष वेबपृष्ठ का अनुरोध किया था। इसलिए, चूंकि ये परिवर्तन ग्राहक पक्ष पर किए गए थे, इसलिए वे "स्रोत देखें" पर दिखाई नहीं देते क्योंकि वे मूल पृष्ठ वितरित किए जाने के बाद किए गए हैं।

पृष्ठ के लाइव स्रोत को देखने के लिए, आप वेबकिट ब्राउज़र में वेब इंस्पेक्टर दृश्य या फ़ायरफ़ॉक्स में फ़ायरबग का उपयोग कर सकते हैं। ये डीओएम में किसी भी बदलाव का ट्रैक रखते हैं और जो स्रोत आप देख सकते हैं उसे अपडेट कर सकते हैं।

0

ऐसे समय होते हैं जब आईई/फ़ायरफ़ॉक्स/क्रोम में देव उपकरण आपके डोम के साथ नहीं रहते हैं। इसका मतलब है कि आप जेडीआई के योग्य कुछ कोड से निपट रहे हैं - या डार्थ वडर ने इसे डीबग करने के लिए वहां छोड़ दिया है।

+0

कब पसंद है? मैं jquery.chosen के साथ एक फॉर्म का चयन कर रहा हूं, और Chrome devtools में मूल HTML बदलना नहीं देख रहा हूं, हालांकि अगर मैं कंसोल में '$ (' my-select ') तत्व का निरीक्षण करता हूं, तो मुझे लगता है कि वर्तमान मूल्य सटीक है ... – ptim

+0

मुझे यह व्यवहार मिलता है जब जावास्क्रिप्ट को अजाक्स पेलोड के हिस्से के रूप में पृष्ठ में गतिशील रूप से इंजेक्शन दिया जाता है। – BraveNewMath

3

वेब डेवलपर टूल (फ़ायरफ़ॉक्स एडन) "View generated source" में एक विकल्प है जो आपको परिवर्तन के बाद जेनरेट किया गया संपूर्ण स्रोत कोड देगा।

view source->View generated source