HTML को किसी कंटेनर तत्व में बिना आंतरिक HTML पुनरीक्षित किए जोड़ना

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

शुक्र है, एक विकल्प है जो इन मुद्दों पर काबू पाता है: insertAdjacentHTML() । यह विधि कंटेनर तत्व के भीतर निर्दिष्ट स्थान पर HTML को जोड़ने का एक सुविधाजनक और लचीला तरीका प्रदान करती है।

insertAdjacentHTML() विधि दो पैरामीटर लेती है:

1. सम्मिलन की स्थिति: यह पैरामीटर निर्धारित करता है कि HTML स्ट्रिंग कहाँ सम्मिलित की जाएगी। यह चार मानों में से एक ले सकता है:

   • "beforebegin" - कंटेनर तत्व से पहले
   • "afterbegin" - कंटेनर तत्व के पहले बच्चे के रूप में
   • " beforeend" - कंटेनर तत्व के अंतिम बच्चे के रूप में
   • "afterend" - कंटेनर तत्व के बाद
2. HTML स्ट्रिंग: यह HTML है कोड जो निर्दिष्ट स्थिति में डाला जाएगा। कोई भी अतिरिक्त टैग जैसे आप createElement() का उपयोग करते समय करेंगे।

var कंटेनर = document.getElementById('myContainer'); कंटेनर.insertAdjacentHTML('beforeend', '

यह कोड कंटेनर के नीचे आईडी "newElement" के साथ एक नया div तत्व जोड़ देगा तत्व, मौजूदा तत्वों या गतिशील सामग्री को प्रभावित किए बिना।