मौजूदा HTML तत्वों में नई सामग्री को कुशलतापूर्वक जोड़ना किसी भी वेब डेवलपर के लिए एक महत्वपूर्ण कौशल है। जावास्क्रिप्ट इसे प्राप्त करने के कई तरीके प्रदान करता है, प्रत्येक अपनी ताकत और कमजोरियों के साथ। यह लेख सबसे प्रभावी तरीकों का पता लगाता है, प्रदर्शन और सर्वोत्तम प्रथाओं पर ध्यान केंद्रित करता है।
विषयवस्तु की तालिका
innerHTMLके उपयोग के नुकसानappendChild()का उपयोग करनाinsertAdjacentHTML()का उपयोग करना- सही विधि चुनना
innerHTML के उपयोग के नुकसान
प्रतीत होने पर सरल, innerHTML गुण में महत्वपूर्ण सीमाएँ हैं। innerHTML में नया HTML असाइन करने से तत्व की मौजूदा सामग्री पूरी तरह से बदल जाती है। इसका मतलब है कि कोई भी संलग्न ईवेंट लिसनर, डेटा या जावास्क्रिप्ट इंटरैक्शन खो जाते हैं। बार-बार innerHTML अपडेट प्रदर्शन को भी नकारात्मक रूप से प्रभावित कर सकते हैं, खासकर बड़ी मात्रा में सामग्री के साथ। उदाहरण के लिए:
const myElement = document.getElementById("myElement");
myElement.innerHTML = "<p>यह नई सामग्री है।</p>";
सामग्री जोड़ने के लिए innerHTML से बचें; यह पूरी सामग्री प्रतिस्थापन के लिए सबसे उपयुक्त है।
appendChild() का उपयोग करना
appendChild() विधि सीधे DOM में हेरफेर करती है, एक पैरेंट के चाइल्ड नोड्स के अंत में एक नया नोड जोड़ती है। यह मौजूदा तत्वों और ईवेंट लिसनर को संरक्षित करता है। आपको document.createElement() का उपयोग करके नया नोड बनाना होगा:
const myElement = document.getElementById("myElement");
const newParagraph = document.createElement("p");
newParagraph.textContent = "यह appendChild() का उपयोग करके जोड़ी गई नई सामग्री है।";
myElement.appendChild(newParagraph);
यह createElement() कॉल को नेस्ट करके जटिल संरचनाओं को जोड़ने के लिए कुशल और स्केलेबल है।
insertAdjacentHTML() का उपयोग करना
insertAdjacentHTML() लक्ष्य तत्व के सापेक्ष विशिष्ट स्थानों पर HTML सम्मिलित करने का एक संक्षिप्त तरीका प्रदान करता है। पहला तर्क स्थिति (“beforebegin”, “afterbegin”, “beforeend”, “afterend”) निर्दिष्ट करता है, और दूसरा HTML स्ट्रिंग है:
const myElement = document.getElementById("myElement");
myElement.insertAdjacentHTML("beforeend", "<p>यह insertAdjacentHTML() का उपयोग करके जोड़ी गई नई सामग्री है।</p>");
insertAdjacentHTML() आम तौर पर छोटे परिवर्धन के लिए appendChild() से तेज होता है, क्योंकि ब्राउज़र HTML पार्सिंग को कुशलतापूर्वक संभालता है। हालाँकि, बड़े परिवर्धन के लिए, appendChild() अधिक प्रदर्शनशील हो सकता है।
सही विधि चुनना
HTML सामग्री जोड़ने के लिए, innerHTML से बचें। बड़े या जटिल परिवर्धन के लिए appendChild() बेहतर प्रदर्शन और नियंत्रण प्रदान करता है। insertAdjacentHTML() छोटे, सरल परिवर्धन के लिए एक संक्षिप्त विकल्प है। वह विधि चुनें जो आपकी विशिष्ट आवश्यकताओं और सामग्री के आकार/जटिलता के अनुकूल हो।