हर जगह InsertAdjacentHTML

Paul Kinlan

अगर हमें किसी एचटीएमएल दस्तावेज़ में कॉन्टेंट डालना है, तो इसके तीन तरीके हैं:

• createNode और appendChild जैसे डीओएम तरीकों का इस्तेमाल करना
• दस्तावेज़ के फ़्रैगमेंट का इस्तेमाल करना
• innerHTML का इस्तेमाल करना

यह कहा जा सकता है कि हमारे पास इस्तेमाल के कुछ उदाहरणों के लिए document.write भी है.

innerHTML को HTML5 में स्टैंडर्ड किया गया है. साथ ही, इसके साथ एक और तरीका insertAdjacentHTML है, जो innerHTML की तरह ही काम करता है. हालांकि, इससे हमें यह तय करने में मदद मिलती है कि एचटीएमएल कॉन्टेंट को कहां डालना है: beforeBegin, afterBegin, beforeEnd, और afterEnd.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

साल 2008 में, जॉन रेसिग ने insertAdjacentHTML के बारे में एक लेख लिखा था. इसमें उन्होंने यह निष्कर्ष दिया था:

ध्यान दें: ब्राउज़र में इस तरीके को लागू करने से, अच्छी JavaScript लाइब्रेरी लिखने के लिए ज़रूरी कोड की संख्या काफ़ी कम हो जाएगी. मुझे उस दिन का इंतज़ार है जब यह तरीका querySelectorAll के साथ-साथ ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध हो, ताकि हम ज़्यादा मेहनत करके कोड को आसान बना सकें.

अब तक, insertAdjacentHTML की मुख्य समस्या यह थी कि यह ब्राउज़र के साथ काम नहीं करता. Firefox के वर्शन 8 में insertAdjacentHTML लागू करने के बाद, यह सभी मुख्य ब्राउज़र में उपलब्ध होगा. इनमें मोबाइल ब्राउज़र भी शामिल हैं. अगर आपको इसे अभी इस्तेमाल करना है और यह पक्का करना है कि यह Firefox के 8 से पहले के वर्शन में काम करे, तो इस polyfill का इस्तेमाल करें.