.html() और .contents()

Question

का उपयोग करने के बीच अंतर इन दो jQuery स्निपेट का उपयोग करने के बीच क्या अंतर है?

.append($(this).contents()); 
// and 
.append($(this).html()); 

Answer 1

.contents() तत्वों को लौटाता है, इस प्रकार उन्हें स्थानांतरित करता है। http://api.jquery.com/contents/

.html() एक स्ट्रिंग देता है, इस प्रकार तत्वों की प्रतिलिपि बनाते हैं। http://api.jquery.com/html/

Answer 2

हाँ, वे पूरी तरह से अलग

• .contents() आप युक्त सभी बच्चे डोम नोड तत्व की एक jQuery वस्तु देता है कर रहे हैं।

• .html() आप एचटीएमएल की एक स्ट्रिंग तत्व के वंशज नोड से गाया देता है।

तो जब आप contents().append(), आप एक नए स्थान पर नोड्स स्थानांतरित कर रहे हैं।

जब आप .append().html(), तो आप HTML स्ट्रिंग से नए नोड्स उत्पन्न कर रहे हैं।

---

मन क्लाइंट की तरफ, कोई एचटीएमएल है कि में रखें। आपके पास केवल डोम है।

यह देखते हुए कि ...

• ... जब आप .html() करते हैं, क्या हो रहा है कि सभी वंशज डोम नोड्स का विश्लेषण किया जा रहा है, और एक HTML स्ट्रिंग बनाया जा रहा है और वापस लौटा है।

• ... जब आप .html('<b>some HTML content</b>') करते हैं, एचटीएमएल स्वयं स्ट्रिंग डोम को नहीं जोड़ा गया है, बल्कि स्ट्रिंग, पार्स, और नए डोम नोड्स उत्पन्न कर रहे हैं है जो तब डोम में जुड़ जाते हैं।

---

एक टिप्पणी के बारे में काटने और नकल के आधार पर यह है जैसे कि आप अभी भी लगता है कि आप सर्वर से भेजे मूल HTML तार के साथ काम कर रहे हैं लगता है।

आप नहीं हैं।

आप जावास्क्रिप्ट के साथ काम कर रहे हैं वस्तुओं (अच्छी तरह से, मेजबान वस्तुओं) कि एक दूसरे के भीतर नेस्टेड रहते हैं वस्तुओं (माता-पिता, बच्चों, पोते, आदि) के एक पदानुक्रम के रूप में। आप पदानुक्रम के भीतर किसी अन्य स्थान पर उस पदानुक्रम के एक भाग को स्थानांतरित कर सकते हैं।

तत्वों के इस पदानुक्रम को डोम, या दस्तावेज़ ऑब्जेक्ट मॉडल कहा जाता है।

दुर्भाग्य से, चूंकि jQuery की .append() एक HTML स्ट्रिंग स्वीकार करता है, यह भ्रम में जोड़ता है कि आप वास्तव में वस्तुओं के बजाय HTML मार्कअप से निपट रहे हैं।

तो मैं इसे फिर से राज्य होगा ...

• .html()एक नया HTML स्ट्रिंग उत्पन्न करता है। जब आप .append() पर स्ट्रिंग देते हैं, तो यह उस स्ट्रिंग के आधार पर नए नोड्स बनाएगा, और उन्हें सम्मिलित करेगा।

• .contents() बस मौजूदा नोड्स का चयन करता है, और उन्हें डाल देता है। चूंकि एक नोड एक ही समय में दो स्थानों में नहीं हो सकता है, इसलिए नोड्स को डीओएम में स्थान पर स्थानांतरित किया जाता है जहां उन्हें जोड़ा जा रहा है।