JavaScript appendChild: एक संपूर्ण गाइड

JavaScript appendChild() मेथड किसी नोड के अंत में आइटम जोड़ता है। appendChild() का उपयोग अक्सर लिस्ट में <li> आइटम्स जोड़ने के लिए किया जाता है। यदि आप किसी नोड में एक से अधिक आइटम जोड़ना चाहते हैं तो आपको कई appendChild() स्टेटमेंट्स का उपयोग करना होगा।

JavaScript appendChild का उपयोग कैसे करें

कुछ लिस्ट्स में टेक्स्ट होता है; अन्य लिस्ट्स में इमेजेज होती हैं; अन्य लिस्ट्स में कस्टम वेब एलिमेंट्स होते हैं। लिस्ट में जो भी हो, एक बात निश्चित है: वेब पेज लिस्ट्स से भरे होते हैं।

जब आप लिस्ट बना रहे होते हैं, तो आप आमतौर पर HTML का उपयोग करके इसके मानों को हार्डकोड करेंगे। इस प्रक्रिया को JavaScript appendChild नामक मेथड का उपयोग करके तेज किया जा सकता है। यह मेथड आपको लिस्ट या अन्य वेब एलिमेंट, जैसे ब्लॉकक्वोट, के अंत में आइटम जोड़ने की अनुमति देता है।

इस गाइड में, हम बात करने जा रहे हैं कि JavaScript में appendChild() क्या है और यह कैसे काम करता है। हम आपको शुरू करने में मदद करने के लिए एक उदाहरण के माध्यम से चलेंगे। चलिए शुरू करते हैं!

JavaScript appendChild क्या है?

appendChild() पैरेंट नोड के अंत में एक नोड जोड़ता है। appendChild() का उपयोग आमतौर पर HTML लिस्ट में आइटम्स जोड़ने के लिए किया जाता है। नोड HTML डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) में किसी भी आइटम को संदर्भित करता है।

appendChild() के लिए सिंटैक्स इस तरह है:

parent.appendChild(child);

"parent" उस एलिमेंट को संदर्भित करता है जिसमें आप चाइल्ड जोड़ना चाहते हैं। "child" वह एलिमेंट है जिसे आप पैरेंट के नीचे जोड़ना चाहते हैं।

आपको JavaScript getElementById() या किसी अन्य "गेटर" की तरह मेथड का उपयोग करके एलिमेंट प्राप्त करने की आवश्यकता है। या, आप JavaScript में HTML एलिमेंट बना सकते हैं और फिर उस एलिमेंट को appendChild() के साथ "पैरेंट" ऑब्जेक्ट के रूप में उपयोग कर सकते हैं।

उदाहरण के लिए, स्कोन रेसिपी की सूची में नोड्स की सूची होगी। ये नोड्स शायद <li> टैग्स होंगे क्योंकि हम लिस्ट बना रहे होंगे।

एक पैरेंट <div> जिसमें <img> टैग्स होते हैं, उसमें चाइल्ड <img> नोड्स होंगे। appendChild() का एक सामान्य उपयोग <ul> या <ol> जैसी लिस्ट में <li> टैग्स जोड़ना है।

appendChild() JavaScript: उदाहरण

आइए appendChild का उपयोग करने वाला एप्लिकेशन बनाते हैं। हम दसवीं कक्षा के छात्रों के नामों की सूची लोड करने वाली साइट बनाने जा रहे हैं। हम इसे तीन चरणों में तोड़ेंगे:

• फ्रंट एंड सेट करना
• एलिमेंट्स का चयन और निर्माण करना
• appendChild का उपयोग करना

फ्रंट एंड सेट करना

पहले, हम एक बुनियादी फ्रंट एंड सेट करेंगे जो हमारे छात्र नामों की सूची दिखाता है। index.html नामक फाइल खोलें और यह कोड पेस्ट करें:

<!DOCTYPE html> <html> <head> <title>Tenth Grade Class Roster</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Tenth Grade Class Roster</h1> <ul> </ul> </body> <script src="scripts.js"></script> </html>

हमने एक बुनियादी HTML डॉक्यूमेंट बनाया है। इस डॉक्यूमेंट में एक शीर्षक और एक लिस्ट है जिसमें कोई चाइल्ड आइटम नहीं हैं। लिस्ट को <ul> टैग से दर्शाया गया है।

अगला, आइए styles.css नामक फाइल में अपने पेज में कुछ स्टाइल्स जोड़कर हमारे वेब पेज की सौंदर्यशास्त्र में सुधार करें:

body { background-color: #f7f7f7; margin: auto; width: 50%; }

यह CSS नियम हमारे पेज के लिए हल्के ग्रे बैकग्राउंड कलर सेट करेगा। हम CSS background-color प्रॉपर्टी का उपयोग करके ऐसा करते हैं। यह <body> टैग की सामग्री को पेज के केंद्र में भी ले जाएगा। हमने लेआउट को कैसे संरचित किया, इसके बारे में अधिक जानने के लिए, हमारे CSS बॉक्स मॉडल गाइड को देखें।

हमारा पेज अभी कार्यात्मक नहीं है। हमने कोई लिस्ट एलिमेंट्स नहीं जोड़े हैं। जब आप इसे ब्राउज़र में खोलते हैं तो हमारा पेज ऐसा दिखता है:

स्पष्ट रूप से अभी भी काम करना बाकी है। आइए हमारे वेब पेज में JavaScript जोड़ते हैं।

एलिमेंट्स का चयन और निर्माण करना

इससे पहले कि हम अपनी लिस्ट में आइटम्स जोड़ना शुरू कर सकें, हमें उन एलिमेंट्स को चुनना होगा जिनके साथ हम काम करने जा रहे हैं। scripts.js नामक फाइल खोलें और यह कोड जोड़ें:

const students = document.querySelector("ul");

कोड की यह लाइन हमारे पेज पर <ul> टैग वाले आइटम को चुनेगी। यह हमारी लिस्ट को दर्शाता है। अगला, हम अपनी लिस्ट में जोड़ने के लिए एक एलिमेंट बनाने जा रहे हैं:

let li = document.createElement("li"); li.textContent = "Steven";

यह कोड "Steven" शब्द वाले <li> टैग के साथ एक टेक्स्ट नोड बनाता है। अब बस हमारे नए बनाए गए एलिमेंट को हमारी लिस्ट में जोड़ना बाकी है।

JavaScript appendChild() मेथड का उपयोग करना

appendChild() हमें नोड में एलिमेंट्स जोड़ने की अनुमति देता है। अपने scripts.js फाइल के नीचे निम्न कोड जोड़ें:

students.appendChild(li);

यह हमारे द्वारा पहले बनाए गए लिस्ट आइटम को हमारी लिस्ट में जोड़ देगा। आइए अपना वेब पेज खोलें और परिणाम देखें:

हमारी लिस्ट में अब एक आइटम है। हम एक फंक्शन बनाकर अपने कोड को अधिक कुशल बना सकते हैं जो हमारी लिस्ट में आइटम्स जोड़ता है। यह हमें पहले के createElement कोड को दोहराए बिना कई आइटम्स जोड़ने की अनुमति देगा।

createElement और textContent कोड की लाइन्स को इसमें बदलें:

function createStudent(name) { let li = document.createElement("li"); li.textContent = name; return li; }

यह फंक्शन जब भी कॉल किया जाएगा एक नया <li> एलिमेंट बनाएगा। फिर, इस फंक्शन का उपयोग करने के लिए appendChild() स्टेटमेंट को बदलें:

students.appendChild(createStudent("Mark")); students.appendChild(createStudent("Chloe")); students.appendChild(createStudent("Louise"));

यह तीन छात्र बनाएगा: Mark, Chloe, और Louise। आइए फिर से अपनी index.html फाइल खोलें और देखें कि क्या हमारे परिवर्तन किए गए हैं:

हमारे क्लास रोस्टर में अब तीन नाम हैं।

आइटम्स को दूसरी लिस्ट में ले जाएं

आप appendChild() मेथड का उपयोग करके आइटम्स को दूसरी लिस्ट में ले जा सकते हैं। आइए इसे उपरोक्त उदाहरण से संशोधित करके दिखाते हैं। पहले, आइए अपने HTML पेज को बदलें ताकि हमारे पास दो लिस्ट्स हों:

... <body> <h1>Tenth Grade Class Roster</h1> <h3>Sat Test</h3> <ul id="sat_test"> </ul> <h3>Has Not Sat Test</h3> <ul id="has_not_sat_test"> </ul> </body> ...

हमने दो लिस्ट्स बनाईं: sat test और has not sat test। अब, आइए अपने JavaScript फाइल को अपडेट करें ताकि हमारी दो लिस्ट्स को चुनें और तीन छात्र बनाएं:

const sat_test = document.getElementById("sat_test"); const has_not_sat_test = document.getElementById("has_not_sat_test"); function createStudent(name) { let li = document.createElement("li"); li.textContent = name; return li; } has_not_sat_test.appendChild(createStudent("Mark")); has_not_sat_test.appendChild(createStudent("Chloe")); has_not_sat_test.appendChild(createStudent("Louise"));

हम अपनी दो लिस्ट्स को चुनने के लिए getElementById मेथड का उपयोग करते हैं।

यह कोड Mark, Chloe, और Lucy को "has not sat test" लिस्ट में जोड़ता है। Louise ने अभी अपना टेस्ट दिया है, इसलिए उसे दूसरी लिस्ट में ले जाया जा सकता है। हम appendChild() मेथड और lastChild नामक दूसरे मेथड का उपयोग करके उसका नाम ले जा सकते हैं:

var louise = has_not_sat_test.lastChild; sat_test.appendChild(louise);

यह कोड हमारी "has not sat test" लिस्ट में अंतिम DOM एलिमेंट को चुनता है। यह आइटम lastChild मेथड का उपयोग करके प्राप्त किया जाता है। अगला, हमने इस आइटम को हमारी "sat test" लिस्ट में जोड़ दिया है।

आइए अपनी HTML फाइल खोलें:

हमारे पास दो लिस्ट्स हैं: sat test और has not sat test। प्रारंभ में, हम सभी छात्र नामों को "has not sat test" लिस्ट में ले जाते हैं। फिर, हम appendChild() का उपयोग करके Louise के नाम को "sat test" लिस्ट में ले जाते हैं।

निष्कर्ष

appendChild() मेथड एलिमेंट के अंत में नोड बनाने के लिए उपयोग किया जाता है। आप किसी भी एलिमेंट को एलिमेंट्स की लिस्ट में जोड़ने के लिए appendChild() का उपयोग कर सकते हैं। उदाहरण के लिए, आप <section> टैग में <div> एलिमेंट जोड़ सकते हैं।

चुनौती के रूप में, यह देखने की कोशिश करें कि क्या आप appendChild() JavaScript मेथड का उपयोग करके इमेजेज का ग्रिड बना सकते हैं। जब पेज लोड होता है, तो इसे appendChild() का उपयोग करके चार इमेजेज की लिस्ट रेंडर करनी चाहिए।

शीर्ष JavaScript ऑनलाइन कोर्सेज और सीखने के संसाधनों पर मार्गदर्शन के लिए, हमारी How to Learn JavaScript गाइड देखें।