जावास्क्रिप्ट पर तत्वों का निर्माण और सम्मिलन

अब हम सीखेंगे कि कैसे जावास्क्रिप्ट के माध्यम से नए DOM तत्व बनाए जाएं, और फिर उन्हें पेज पर जोड़ा जाए। इसके लिए मेथड createElement का उपयोग किया जाता है। इस मेथड के पैरामीटर के रूप में उस टैग का नाम पास करना चाहिए जिसे बनाया जाना है।

यदि createElement के परिणाम को एक वेरिएबल में लिखा जाए, तो उस वेरिएबल में ऐसा तत्व होगा, जैसे कि हमने उसे querySelector के माध्यम से प्राप्त किया हो।

एकमात्र अंतर - हमारा तत्व पेज पर प्लेस नहीं किया जाएगा। और इस तरह हम इसका टेक्स्ट, एट्रिब्यूट्स बदल सकते हैं, इवेंट हैंडलर लगा सकते हैं और अंत में इसे पेज पर प्लेस कर सकते हैं।

पेज पर नए तत्व को प्लेस करने के लिए मेथड appendChild का उपयोग किया जाता है। इस मेथड को उस तत्व पर अप्लाई करना चाहिए, जिसमें हम अपना तत्व रखना चाहते हैं। और मेथड के पैरामीटर के रूप में हमारा नया तत्व पास करना चाहिए, जो पहले createElement के माध्यम से बनाया गया था।

आइए एक प्रैक्टिकल उदाहरण देखें। मान लीजिए कि हमारे पास एक div है, और उसमें - कई पैराग्राफ हैं:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

आइए एक पैराग्राफ बनाएं, उसका टेक्स्ट सेट करें और पेज पर ब्लॉक #parent के अंत में प्लेस करें:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

कोड निष्पादित करने का परिणाम:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

दिया गया ol:

<ol id="elem"></ol>

इसके अंत में li को टेक्स्ट 'item' के साथ इन्सर्ट करें।

दिया गया ol और बटन:

<ol id="elem"></ol>
<button id="button">click me</button>

ऐसा करें कि बटन पर क्लिक करने पर लिस्ट के अंत में li टेक्स्ट 'item' के साथ ऐड हो जाए।