एपेंड चाइल्ड जावास्क्रिप्ट:एक गाइड

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

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

JavaScript एपेंड चाइल्ड का उपयोग कैसे करें

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

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

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

JavaScript एपेंड चाइल्ड क्या है?

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

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

parent.appendChild(child);

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

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

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

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

एक अभिभावक

जिसमें . शामिल है टैग में बच्चा होगा नोड्स। AppendChild() का एक सामान्य उपयोग

. जोड़ना है किसी सूची में टैग जैसे

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 दस्तावेज़ बनाया है। इस दस्तावेज़ में एक शीर्षक और एक सूची है जिसमें कोई चाइल्ड आइटम नहीं है। सूची को

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

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

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

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

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

तत्वों को चुनना और बनाना

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

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

कोड की यह पंक्ति हमारे पेज पर

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

यह कोड

. के साथ एक टेक्स्ट नोड बनाता है टैग जिसमें "स्टीवन" शब्द है। अब बस इतना करना बाकी है कि हमारे नए बनाए गए तत्व को हमारी सूची में जोड़ें।

AppendChild() जावास्क्रिप्ट विधि का उपयोग करना

बच्चे को जोड़ें () हमें एक नोड में तत्व जोड़ने की अनुमति देता है। अपनी scripts.js फ़ाइल के नीचे निम्न कोड जोड़ें:
```
students.appendChild(li);
```
यह हमारे द्वारा पहले बनाई गई सूची आइटम को हमारी सूची में जोड़ देगा। आइए अपना वेब पेज खोलें और परिणाम देखें:

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

createElement को बदलें और पाठ्यसामग्री इसके लिए कोड की पंक्तियाँ:
```
function createStudent(name) {
	let li = document.createElement("li");
li.textContent = name;
return li;
}
```
यह फ़ंक्शन एक नया
बनाएगा तत्व जब भी कहा जाता है। फिर, बच्चे को जोड़ें . बदलें () इस फ़ंक्शन का उपयोग करने के लिए कथन:
```
students.appendChild(createStudent("Mark"));
students.appendChild(createStudent("Chloe"));
students.appendChild(createStudent("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>
...
```
हमने दो सूचियां बनाई हैं:सैट टेस्ट और सैट टेस्ट नहीं। अब, हमारी दो सूचियों का चयन करने और तीन छात्र बनाने के लिए हमारी जावास्क्रिप्ट फ़ाइल को अपडेट करें:
```
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 विधि का उपयोग करते हैं।

यह कोड मार्क, क्लो और लुसी को "परीक्षा में नहीं बैठा" सूची में जोड़ता है। लुईस ने अभी-अभी अपनी परीक्षा दी है, और इसलिए उसे दूसरी सूची में ले जाया जा सकता है। हम उसका नाम appendChild . का उपयोग करके स्थानांतरित कर सकते हैं () विधि और दूसरी विधि जिसे lastChild . कहा जाता है :
```
var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);
```
यह कोड हमारी "परीक्षा में नहीं बैठे" सूची में अंतिम DOM तत्व का चयन करता है। यह आइटम lastChild विधि का उपयोग करके पुनर्प्राप्त किया जाता है। इसके बाद, हमने इस आइटम को अपनी "सैट टेस्ट" सूची में जोड़ दिया है।

आइए हमारी HTML फ़ाइल खोलें:

हमारे पास दो सूचियाँ हैं:सैट टेस्ट और सैट टेस्ट नहीं। प्रारंभ में, हम सभी छात्रों के नामों को "परीक्षा में नहीं बैठे" सूची में ले जाते हैं। उसके बाद, हम appendChild . का उपयोग करते हैं () लुईस के नाम को "सैट टेस्ट" सूची में स्थानांतरित करने के लिए।

निष्कर्ष

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

एक चुनौती के रूप में, यह देखने की कोशिश करें कि क्या आप appendChild . का उपयोग कर सकते हैं () छवियों का ग्रिड बनाने के लिए जावास्क्रिप्ट विधि। जब कोई पृष्ठ लोड होता है, तो उसे appendChild . का उपयोग करके चार छवियों की एक सूची प्रस्तुत करनी चाहिए ()।

शीर्ष जावास्क्रिप्ट ऑनलाइन पाठ्यक्रमों और सीखने के संसाधनों पर मार्गदर्शन के लिए, हमारी जावास्क्रिप्ट कैसे सीखें गाइड देखें।

एपेंड चाइल्ड जावास्क्रिप्ट:एक गाइड

JavaScript एपेंड चाइल्ड का उपयोग कैसे करें

JavaScript एपेंड चाइल्ड क्या है?

appendChild() जावास्क्रिप्ट:उदाहरण

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

तत्वों को चुनना और बनाना

AppendChild() जावास्क्रिप्ट विधि का उपयोग करना

आइटम को एक अलग सूची में ले जाएं

निष्कर्ष