जावास्क्रिप्ट एक बहुमुखी प्रोग्रामिंग भाषा है जो HTML (हाइपर टेक्स्ट मार्कअप लैंग्वेज) के समान तत्वों के निर्माण और हेरफेर की अनुमति देती है। यह इस कार्यक्षमता को निष्पादित करने के लिए 'append()' और 'appendChild()' विधियों का पालन करता है। जैसा कि उनके नाम से पता चलता है, दोनों विधियाँ HTML तत्वों जैसे स्ट्रिंग या नोड ऑब्जेक्ट को जोड़ती हैं। हालाँकि, वे अपनी कार्यक्षमता और अन्य कारकों के आधार पर एक दूसरे से भिन्न होते हैं।
यह मार्गदर्शिका jQuery के बीच मुख्य अंतरों को रेखांकित करती है। संलग्न ()' और जावास्क्रिप्ट' अपेंड चाइल्ड ()'' तरीके।
JQuery के बीच अंतर पर आगे बढ़ने से पहले ' संलग्न ()' और जावास्क्रिप्ट' अपेंड चाइल्ड ()'' विधियाँ, पहले इन विधियों की मूल बातों पर एक नज़र डालें।
jQuery एपेंड() विधि क्या है?
jQuery ' संलग्न ()' विधि वांछित 'नोड' और 'स्ट्रिंग' ऑब्जेक्ट को मूल तत्व के अंतिम बच्चे के रूप में अंत में सम्मिलित करती है।
वाक्य - विन्यास
$ ( चयनकर्ता ) . संलग्न ( संतुष्ट , समारोह ( अनुक्रमणिका , एचटीएमएल ) )उपरोक्त वाक्यविन्यास में:
- संतुष्ट : यह HTML तत्वों, DOM तत्वों या jQuery ऑब्जेक्ट को संदर्भित करता है।
- समारोह : यह एक अतिरिक्त पैरामीटर है जो उपयोगकर्ता द्वारा परिभाषित जावास्क्रिप्ट फ़ंक्शन को 'इंडेक्स (तत्व स्थिति)' और 'एचटीएमएल (चयनित तत्वों का एचटीएमएल)' पैरामीटर निर्दिष्ट करता है।
जावास्क्रिप्ट एपेंडचाइल्ड() विधि क्या है?
'appendChild()' विधि केवल मूल तत्व के अंतिम बच्चे के बाद 'नोड' ऑब्जेक्ट जोड़ती है। यह पहले 'createElement()' विधि का उपयोग करके वांछित नोड ऑब्जेक्ट बनाता है और फिर उसे जोड़ता है।
वाक्य - विन्यास
तत्व। अपेंड चाइल्ड ( नोड )इस सिंटैक्स के लिए केवल एक पैरामीटर की आवश्यकता होती है, ' नोड ”।
जैसा कि उनके नाम से पता चलता है, ऊपर चर्चा की गई विधियाँ एक दूसरे से भिन्न हैं। यह खंड कुछ कारकों का पता लगाता है जिन पर वे भिन्न हैं। आइए उन पर एक नजर डालें.
jQuery एपेंड() और जावास्क्रिप्ट एपेंड चाइल्ड() विधि के बीच अंतर
| शर्तें | jQuery संलग्न करें() | जावास्क्रिप्ट एपेंड चाइल्ड() |
|---|---|---|
| प्रयोग | इसका उपयोग नया जोड़कर मूल तत्व को जोड़ने के लिए किया जा सकता है नोड ' और ' डोरी ” एक ही समय में वस्तुएं। | इसका उपयोग केवल मूल तत्व को नए द्वारा जोड़ने के लिए किया जा सकता है ' नोड 'का उपयोग करके बनाया गया' createElement ()' तरीका। |
| एकाधिक नोड ऑब्जेक्ट | “ संलग्न ()' विधि निम्नलिखित प्रारूप में एक ही समय में अपने संबंधित मूल तत्व में कई नोड ऑब्जेक्ट जोड़ सकती है। प्रारूप : 'div.append(फर्स्टचाइल्ड, सेकंडचाइल्ड, 'लिनक्सहिंट');' |
“ अपेंड चाइल्ड ()' विधि कई नोड ऑब्जेक्ट के साथ ठीक काम करती है लेकिन यह एक समय में केवल पहले बच्चे को जोड़ती है और फिर अगले को। प्रारूप : 'div.appendChild(फर्स्टचाइल्ड, सेकंडचाइल्ड, 'लिनक्सहिंट');' |
| प्रतिलाभ की मात्रा | “ संलग्न ()' विधि संलग्न नोड ऑब्जेक्ट को वापस नहीं करती है क्योंकि यह एक 'अपरिभाषित' लौटाया गया मान दिखाती है। प्रारूप : कंसोल.लॉग(appendChildValue) // अपरिभाषित |
दूसरी ओर, ' अपेंड चाइल्ड ()' विधि संलग्न नोड ऑब्जेक्ट वाला मान लौटाती है। प्रारूप : कंसोल.लॉग(appendChildValue) //
|
अब सूचीबद्ध प्रमुख अंतरों के व्यावहारिक कार्यान्वयन की ओर बढ़ें।
अंतर 1: jQuery एपेंड() और जावास्क्रिप्ट एपेंड चाइल्ड() विधियों को लागू करना
पहले अंतर के अनुसार, ' संलग्न ()' विधि नोड और स्ट्रिंग दोनों को जोड़ती है जबकि 'appendChild()' विधि केवल नोड ऑब्जेक्ट को जोड़ती है।
HTML कोड
सबसे पहले, बताए गए HTML कोड पर एक नज़र डालें:
< शरीर >< एच 2 > jQuery 'संलग्न करें ()' विधि < / एच 2 > //संलग्न करने के लिए() < एच 2 > jQuery 'appendChild()' विधि < / एच 2 > //एपेंड चाइल्ड के लिए()
< बटन पहचान = 'बीटीएन1' क्लिक पर = 'myFunc1()' > DOM स्ट्रिंग जोड़ें < / बटन >
< बटन पहचान = 'बीटीएन2' क्लिक पर = 'myFunc2()' > DOM नोड जोड़ें < / बटन >
< पी पहचान = 'के लिए' > यह एक पैराग्राफ है. < / पी >
< राजभाषा पहचान = 'सूची' >
< वह > जावास्क्रिप्ट ट्यूटोरियल 1 < / वह >
< वह > जावास्क्रिप्ट ट्यूटोरियल 2 < / वह >
< वह > जावास्क्रिप्ट ट्यूटोरियल 3 < / वह >
< / राजभाषा >
< / शरीर >
उपरोक्त कोड पंक्तियों में:
- '
' टैग लेवल 2 के उपशीर्षक को परिभाषित करता है।
- '<बटन>' टैग क्रमशः दो बटन जोड़ते हैं जिनमें उनकी निर्दिष्ट आईडी और 'ऑनक्लिक' माउस इवेंट होते हैं, ताकि इन इवेंट के ट्रिगर होने पर संबंधित जावास्क्रिप्ट फ़ंक्शन को लागू किया जा सके।
- '
' टैग संलग्न स्ट्रिंग मान को दिखाने के लिए निर्दिष्ट आईडी 'पैरा' के साथ एक खाली पैराग्राफ बनाता है।
- '
- ' टैग एक आईडी 'सूची' के साथ एक ऑर्डर की गई सूची जोड़ता है, और '
- ' टैग की मदद से सूचीबद्ध आइटम जोड़ता है।
टिप्पणी : 'append()' और 'appendChild()' दोनों तरीकों के पहले अंतर में ऊपर लिखे HTML कोड का पालन करें।
'संलग्न करें()' विधि jQuery कोड
सबसे पहले, 'संलग्न ()' विधि jQuery कोड का अवलोकन:
< सिर >< स्क्रिप्ट स्रोत = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > लिखी हुई कहानी >
< लिखी हुई कहानी >
$ ( दस्तावेज़ ) . तैयार ( समारोह ( ) {
$ ( '#btn1' ) . क्लिक ( समारोह ( ) {
$ ( 'पी' ) . संलग्न ( ' संलग्न स्ट्रिंग ।' ) ;
} ) ;
$ ( '#btn2' ) . क्लिक ( समारोह ( ) {
$ ( 'ओएल' ) . संलग्न ( '
} ) ;
} ) ;
लिखी हुई कहानी >
सिर >
उपरोक्त कोड पंक्तियों में:
- सबसे पहले, jQuery निर्दिष्ट करें ' सीडीएन 'इसकी आधिकारिक वेबसाइट से पथ' https://jquery.com/ 'की मदद से' स्रोत ' गुण।
- इसके बाद, एक छोटा स्क्रिप्ट अनुभाग जोड़ें जो पहले 'का उपयोग करता है' तैयार ()' कहा गया आह्वान करने की विधि ' समारोह ()'' जब HTML दस्तावेज़ लोड किया जाता है।
- उसके बाद, ' क्लिक ()' विधि उस फ़ंक्शन को निष्पादित करती है जो उस बटन से जुड़ा हुआ है जिसकी आईडी' है btn1 बटन पर क्लिक करें।
- फ़ंक्शन परिभाषा में, ' संलग्न ()' विधि का उपयोग लक्षित पैराग्राफ तत्व को बताई गई स्ट्रिंग के साथ जोड़ने के लिए किया जाता है।
- यही प्रक्रिया जोड़े गए के लिए भी की जाती है आदेशित सूचि ” यानी, नोड ऑब्जेक्ट को दिए गए आइटम में जोड़ना है।
उत्पादन
यहां, यह पुष्टि की गई है कि 'स्ट्रिंग' और 'नोड' ऑब्जेक्ट दोनों को 'एपेंड ()' विधि की मदद से जोड़ा गया है।
'appendChild()' विधि जावास्क्रिप्ट कोड
अब, व्यावहारिक रूप से जावास्क्रिप्ट 'appendChild()' विधि को देखें:
< लिखी हुई कहानी >समारोह myFunc1 ( ) {
के लिए। अपेंड चाइल्ड ( '
संलग्न स्ट्रिंग
' ) // DOM स्ट्रिंग जोड़ें} समारोह myFunc2 ( ) {
कॉन्स्ट तत्व = दस्तावेज़। createElement ( 'वह' ) ;
कॉन्स्ट नोड = दस्तावेज़। createTextNode ( 'संलग्न आइटम' ) ;
तत्व। अपेंड चाइल्ड ( नोड ) ; // DOM नोड जोड़ें
कॉन्स्ट तत्व = दस्तावेज़। getElementById ( 'सूची' ) ;
तत्व। अपेंड चाइल्ड ( तत्व ) ;
}
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट में:
- फ़ंक्शन नाम परिभाषित करें ' myFunc1 ()' जो दिए गए स्ट्रिंग के साथ जोड़े गए पैराग्राफ को जोड़ने के लिए 'appendChild()' विधि का उपयोग करता है।
- अगला, 'में myFunc2 ()' फ़ंक्शन, 'createElement()' विधि एक नया सूची तत्व बनाती है और फिर 'createTextNode()' विधि का उपयोग करके इसमें कुछ टेक्स्ट जोड़ती है।
- उसके बाद, 'appendChild()' विधि का उपयोग करके बनाई गई सूची नोड को उसके टेक्स्ट के साथ जोड़ें।
- अंत में, 'appendChild()' विधि की मदद से नई बनाई गई सूची नोड को एक्सेस की गई ऑर्डर की गई सूची में जोड़ें, जिसकी आईडी 'सूची' है।
उत्पादन
जैसा कि देखा गया है, बटन क्लिक करने पर केवल 'नोड' ऑब्जेक्ट जुड़ता है, 'स्ट्रिंग' नहीं।
गलती
वेब कंसोल खोलने और समस्या का निरीक्षण करने के लिए 'F12' दबाएँ:
जैसा कि देखा गया है, कंसोल 'appendChild()' विधि का उपयोग करके स्ट्रिंग ऑब्जेक्ट को जोड़ने पर एक त्रुटि दिखाता है। इसलिए, यह पुष्टि की गई है कि 'appendChild()' विधि एक स्ट्रिंग ऑब्जेक्ट को नहीं जोड़ती है।
अंतर 2: एकाधिक नोड ऑब्जेक्ट पर jQuery एपेंड() और जावास्क्रिप्ट एपेंड चाइल्ड() विधियों को लागू करना
'एपेंड ()' और 'एपेंड चाइल्ड ()' तरीकों के बीच दूसरे अंतर का विश्लेषण इन तरीकों को कई नोड ऑब्जेक्ट पर निष्पादित करके किया जा सकता है। इसका व्यावहारिक कार्यान्वयन देखने के लिए दिए गए कोड का पालन करें।
HTML कोड
आइए HTML कोड पर चलते हैं:
< डिव पहचान = 'मेन-डिव' >< डिव शैली = 'प्रदर्शन:फ्लेक्स; औचित्य-सामग्री:केंद्र; संरेखित-आइटम:केंद्र; चौड़ाई:50पीएक्स; ऊंचाई:50पीएक्स; पृष्ठभूमि:नारंगी; मार्जिन:10पीएक्स; पाठ-संरेखण:केंद्र;' > एक < / डिव >
< डिव शैली = 'प्रदर्शन:फ्लेक्स; औचित्य-सामग्री:केंद्र; संरेखित-आइटम:केंद्र; चौड़ाई:50पीएक्स; ऊंचाई:50पीएक्स; पृष्ठभूमि:नारंगी; मार्जिन:10पीएक्स; पाठ-संरेखण:केंद्र;' > दो < / डिव >
< डिव शैली = 'प्रदर्शन:फ्लेक्स; औचित्य-सामग्री:केंद्र; संरेखित-आइटम:केंद्र; चौड़ाई:50पीएक्स; ऊंचाई:50पीएक्स; पृष्ठभूमि:नारंगी; मार्जिन:10पीएक्स; पाठ-संरेखण:केंद्र;' > तीन < / डिव >
< / डिव >
यहां, उपरोक्त कोड पंक्तियों में आईडी 'मेन-डिव' के साथ एक मुख्य '
टिप्पणी : ऊपर लिखित HTML कोड का पालन 'append()' और 'appendChild()' दोनों तरीकों के दूसरे अंतर में किया जाता है।
संलग्न() विधि
अब, निम्नलिखित स्क्रिप्ट के साथ आगे बढ़ें:
< लिखी हुई कहानी >कॉन्स्ट maindiv = दस्तावेज़। getElementById ( 'मेन-डिव' ) ;
कॉन्स्ट div4 = दस्तावेज़। createElement ( 'div' ) ;
div4. आंतरिक HTML = 'चार' ;
div4. शैली . पृष्ठभूमि का रंग = 'गुलाबी' ;
div4. क्लासलिस्ट . जोड़ना ( 'div' ) ; कॉन्स्ट div5 = दस्तावेज़। createElement ( 'div' ) ;
div5. आंतरिक HTML = 'पाँच' ;
div5. शैली . पृष्ठभूमि का रंग = 'गुलाबी' ;
div5. क्लासलिस्ट . जोड़ना ( 'div' ) ;
maindiv. संलग्न ( div4 , div5 ) ;
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट में:
- 'मेनडिव' वेरिएबल 'getElementById()' विधि की मदद से अपनी आईडी 'मेन-डिव' का उपयोग करके जोड़े गए 'डिव' तक पहुंचता है।
- इसके बाद, 'createElement()' विधि एक नया 'div' नोड ऑब्जेक्ट बनाती है, 'innerHTML' प्रॉपर्टी का उपयोग करके निर्दिष्ट टेक्स्ट जोड़ती है, और 'style.backgroundcolor' प्रॉपर्टी के माध्यम से पृष्ठभूमि रंग लागू करती है।
- उसके बाद, 'ऐड()' विधि 'क्लासलिस्ट' प्रॉपर्टी का उपयोग करके निर्दिष्ट क्लास सीएसएस गुणों को इसमें जोड़ती है।
- अगले नव निर्मित '' तत्व के लिए भी यही प्रक्रिया अपनाई जाती है।
- अंत में, दोनों नव निर्मित नोड ऑब्जेक्ट को 'append()' विधि की सहायता से एक ही समय में जोड़ा जाता है।
उत्पादन
यहां, नव निर्मित एकाधिक नोड ऑब्जेक्ट को तदनुसार एक ही मूल तत्व से जोड़ा जाता है।
'appendChild()' विधि
इसके बाद, 'appendChild()' विधि के साथ जारी रखें:
< लिखी हुई कहानी >
maindiv. अपेंड चाइल्ड ( div4 ) ;
maindiv. अपेंड चाइल्ड ( div5 ) ;
लिखी हुई कहानी >जैसा कि देखा गया है, 'appendChild()' विधि एक ही मूल तत्व में एक-एक करके कई नोड ऑब्जेक्ट जोड़ती है।
उत्पादन
आउटपुट 'एपेंड ()' विधि के समान है लेकिन नोड ऑब्जेक्ट को निर्दिष्ट करने में भिन्न है।
अंतर 3: एप्लाइड jQuery एपेंड () और जावास्क्रिप्ट एपेंड चाइल्ड () तरीकों का रिटर्न वैल्यू
अंतिम अंतर 'एपेंड ()' और 'एपेंड चाइल्ड ()' तरीकों का 'लौटा हुआ मान' है। आइए इसे व्यावहारिक रूप से देखें।
टिप्पणी : HTML कोड डिफरेंस 2 (एकाधिक नोड ऑब्जेक्ट) के समान है।
'संलग्न करें()' विधि
कोड की दी गई पंक्तियों को देखें:
< लिखी हुई कहानी >
सांत्वना देना। लकड़ी का लट्ठा ( maindiv. संलग्न ( div4 ) ) ;
लिखी हुई कहानी >यहां, निर्दिष्ट नोड ऑब्जेक्ट को जोड़ते समय 'एपेंड ()' विधि के लौटाए गए मान की जांच करने के लिए 'कंसोल.लॉग ()' विधि लागू की जाती है।
उत्पादन
वेब कंसोल खोलने के लिए 'F12' दबाएँ:
जैसा कि देखा गया है, 'संलग्न ()' विधि का लौटाया गया मान 'है अपरिभाषित ”।
एपेंड चाइल्ड() विधि
अब, 'appendChild()' विधि का उपयोग करके निम्नलिखित कोड पर विचार करें:
< लिखी हुई कहानी >
सांत्वना देना। लकड़ी का लट्ठा ( maindiv. अपेंड चाइल्ड ( div4 ) ) ;
लिखी हुई कहानी >'appendChild()' विधि को 'console.log()' विधि के साथ 'append()' विधि के समान निर्दिष्ट करें।
उत्पादन
यहां, आउटपुट स्टाइलिंग गुणों सहित संलग्न तत्व HTML को लौटाता है।
निष्कर्ष
jQuery ' संलग्न ()' और जावास्क्रिप्ट' अपेंड चाइल्ड ()' विधियाँ उनके' के आधार पर भिन्न हैं सिंटैक्स', 'उपयोग', और 'एकाधिक नोड ऑब्जेक्ट ”। इसके अलावा, उनके ' मान लौटाए गए एक दूसरे से भिन्न भी हैं। दोनों विधियाँ उपयोगी हैं और उनका उपयोग उपयोगकर्ता की पसंद पर निर्भर करता है। इस गाइड ने jQuery के बीच अंतर सूचीबद्ध किया है संलग्न ()' और जावास्क्रिप्ट' अपेंड चाइल्ड ()” विधि व्यावहारिक रूप से।