तत्व बनाना और जोड़ना
createElement और append से नए नोड बनाइए।
तत्व बनाना और जोड़ना, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
नए तत्व बनाना
HTML स्ट्रिंग लिखने के बजाय आप कोड में तत्व बना सकते हैं। इससे XSS से बचाव होता है और आपको कॉन्फ़िगर करने के लिए वास्तविक तत्व का संदर्भ मिलता है।
createElement
document.createElement एक नया, अलग तत्व बनाता है। यह मेमोरी में मौजूद होता है, लेकिन अभी पृष्ठ में नहीं होता।
const li = document.createElement("li");
li.textContent = "New item";डालने से पहले कॉन्फ़िगर करना
तत्व के अलग रहते हुए ही उसकी वर्ग-सूची, एट्रिब्यूट और सामग्री निर्धारित कर दीजिए। वह तब तक दिखाई नहीं देता, जब तक आप उसे सम्मिलित नहीं करते।
const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";append
append किसी तत्व के अंतिम बच्चों के रूप में नोड (या स्ट्रिंग) जोड़ता है। इसमें कई आर्ग्युमेंट दिए जा सकते हैं।
const list = document.querySelector("ul");
list.append(li);prepend
prepend नोड को पहले बच्चे के रूप में सम्मिलित करता है, जिससे मौजूदा बच्चे नीचे खिसक जाते हैं।
list.prepend(document.createElement("li"));append स्ट्रिंग स्वीकार करता है
पुराने appendChild के विपरीत, append सीधे स्ट्रिंग और एक साथ कई आर्ग्युमेंट ले सकता है।
const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");appendChild
appendChild पारंपरिक विधि है। यह केवल एक नोड स्वीकार करता है और उसे लौटाता है, जबकि append undefined लौटाता है।
const node = list.appendChild(document.createElement("li"));insertBefore
insertBefore किसी नए नोड को किसी विशिष्ट मौजूदा बच्चे से पहले रखता है, जिससे स्थिति पर सटीक नियंत्रण मिलता है।
const ref = list.children[1];
list.insertBefore(li, ref);insertAdjacentElement
insertAdjacentElement beforebegin, afterbegin, beforeend और afterend जैसी स्थितियों का उपयोग करके किसी तत्व के सापेक्ष सम्मिलन करता है।
ref.insertAdjacentElement("beforebegin", li);समूहों के लिए DocumentFragment
कई तत्व जोड़ते समय पहले उन्हें DocumentFragment में तैयार कीजिए, फिर उसे एक ही बार सम्मिलित कीजिए। इससे रिलेआउट कम होते हैं और काम तेज़ होता है।
const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
const item = document.createElement("li");
item.textContent = "Row " + i;
frag.append(item);
}
list.append(frag);cloneNode
cloneNode(true) किसी तत्व और उसके वंशजों की प्रतिलिपि बनाता है, जो बार-बार दोहराई जाने वाली संरचनाओं के टेम्पलेट के लिए उपयोगी है।
const copy = li.cloneNode(true);
list.append(copy);त्वरित जाँच
सबसे अच्छी तकनीक चुनिए।
पुनरावलोकन
अलग रखे गए तत्व बनाने के लिए createElement का उपयोग कीजिए और उन्हें कॉन्फ़िगर करने के बाद append/prepend (स्ट्रिंग और कई आर्ग्युमेंट स्वीकार करता है), appendChild (एकल नोड), या सटीक स्थितियों के लिए insertBefore/insertAdjacentElement से सम्मिलित कीजिए। कई सम्मिलनों को DocumentFragment के माध्यम से समूहित कीजिए और cloneNode(true) से संरचनाओं का पुनः उपयोग कीजिए।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “तत्व बनाना और जोड़ना” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “तत्व बनाना और जोड़ना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“तत्व बनाना और जोड़ना” में मैं क्या सीखूँगा?
createElement और append से नए नोड बनाइए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“तत्व बनाना और जोड़ना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- टेक्स्ट और HTML सामग्री बदलना
- तत्व बनाना और जोड़ना
- एट्रिब्यूट और क्लास में बदलाव
- नोड हटाना और बदलना