जावास्क्रिप्ट जोड़ें

एपेंड चाइल्ड () जावास्क्रिप्ट विधि एक नोड के अंत में एक तत्व जोड़ती है। appendChild () का उपयोग अक्सर

  • तत्वों को सूची में जोड़ने के लिए किया जाता है। यदि आप एक नोड में एक से अधिक आइटम जोड़ना चाहते हैं, तो आपको एकाधिक एपेंड चाइल्ड () कथनों का उपयोग करना चाहिए।

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

    जब आप एक सूची बनाते हैं, तो आप आमतौर पर इसके मानों को HTML में एन्कोड करते हैं। जावास्क्रिप्ट appendChild नामक विधि का उपयोग करके इस प्रक्रिया को तेज किया जा सकता है। यह विधि आपको किसी सूची या अन्य वेब आइटम के अंत में एक आइटम जोड़ने की अनुमति देती है, जैसे कि एक ब्लॉककोट। ) जावास्क्रिप्ट में है और यह कैसे काम करता है। आपको आरंभ करने के लिए हम एक उदाहरण देखेंगे। आइए शुरू करें!

    appendChild JavaScript क्या है?

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

    appendChild () का सिंटैक्स इस तरह दिखता है:

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

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

  • उदाहरण के लिए, स्कोन व्यंजनों की एक सूची नोड्स की एक सूची शामिल करें। ये नोड्स शायद होंगे

  • क्योंकि हम एक सूची बनाएंगे।

    एक पैरेंट

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

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

    हमने एक बुनियादी HTML दस्तावेज़ बनाया है। इस दस्तावेज़ में एक शीर्षक और उप-तत्वों के बिना एक सूची है। सूची को

      टैग द्वारा दर्शाया गया है।

      अब चलिए जोड़ते हैं हमारे वेब पेज के सौंदर्यशास्त्र को बेहतर बनाने के लिए Style.css नामक फ़ाइल में हमारे पेज पर कुछ शैलियाँ ge:

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

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

      <आंकड़ा वर्ग = "WP छवि गुट">  53h1N2e2JcTmRTZIFItMB6Lz9mFISGZQ CP6OkNpEvNsAmFR5uykmTYLkS1F50UOokk62H14EHqSN4LOq0f3eGcfshnlatBuNVgGGf0WKaDgoBs38g नामक तत्वों को जोड़ने के लिए, हम इस वेब भागों को जोड़ सकते हैं। ब्लॉक-कोडमिरर-ब्लॉक-कोड-ब्लॉक कोड- ब्लॉक
      const student = document.querySelector (" ul "); 

    कोड की यह पंक्ति हमारे पर आइटम का चयन करेगी टैग के साथ पेज

    JavaScript appendChild () विधि का उपयोग

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

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

     PPX9hW Qztc6gNJKNyOeRE2U6hg08YNO H0wIbQGGo9MfA90aFLp A7RDQ8 PsqdHEh6mSG OcHJeDB3efXaFHwI9Fa9DUKqkBjA7qzYk49xSJgps8C2vXIrS0sUxDOoDhiw TGS

    हमारी सूची में अब है एक हिस्सा, हम हमारी सूची में तत्वों को जोड़ने वाले फ़ंक्शन के निर्माण के लिए हमारे कोड को और अधिक कुशल बना सकता है। यह हमें पहले से हमारे createElement कोड को दोहराए बिना और तत्वों को जोड़ने की अनुमति देगा।

    createElement और textContent इस तरह दिखने के लिए कोड की लाइनें:

    यह फ़ंक्शन हर बार बुलाए जाने पर एक नया

  • तत्व बनाएगा। इसके बाद, इस फ़ंक्शन का उपयोग करने के लिए appendChild () कथन को संशोधित करें:

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