कहो कि आपके पास कुछ HTML है जो एक स्ट्रिंग है:
let string_of_html = ` Cool `;शायद यह एक एपीआई से आता है या आप इसे खाका शाब्दिक या कुछ और से बनाया है।
आप innerHTMLएक तत्व में डाल करने के लिए उपयोग कर सकते हैं , जैसे:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;यदि आप insertAdjacentHTMLफ़ंक्शन के साथ जाते हैं तो आपके पास थोड़ा अधिक नियंत्रण होता है क्योंकि आप नए HTML को चार अलग-अलग स्थानों पर रख सकते हैं:
text inside node आप इसका उपयोग करते हैं…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);ऐसी परिस्थितियाँ हैं, जहाँ आप इसके साथ कुछ भी करने से पहले जावास्क्रिप्ट में नव-निर्मित DOM अभी भी कर सकते हैं। उस स्थिति में, आप पहले अपना स्ट्रिंग पार्स कर सकते हैं, जैसे:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');इससे आपको एक संपूर्ण DOM मिलेगा, जिससे आपको अपने द्वारा जोड़े गए बच्चे को बाहर निकालने की आवश्यकता होगी। यह मानते हुए कि यह केवल एक मूल तत्व है ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;अब आप उस के साथ गड़बड़ कर सकते हैं new_element, आवश्यकतानुसार, मुझे यह करने से पहले लगता है कि आपको इसके साथ क्या करना है।
हालांकि यह करने के लिए थोड़ा अधिक सीधा है:
let new_element = document.createRange() .createContextualFragment(string_of_html);आप तत्व को सीधे दस्तावेज़ के टुकड़े के रूप में या जो भी आवश्यक हो, प्राप्त करेंगे। यह तरीका इस मायने में उल्लेखनीय है कि यह वास्तव में अपने अंदर पाए जाने वाले एस को निष्पादित करेगा , जो उपयोगी और खतरनाक दोनों हो सकता है।
यह सब करने के लिए पर्याप्त मात्रा में अति सूक्ष्म अंतर है। उदाहरण के लिए, HTML को वैध होने की आवश्यकता है। विकृत HTML बस काम नहीं करने वाली है। विकृत भी आपको आश्चर्यचकित कर सकता है, जैसे कि एक में डालकर
Koen Schaft लिखते हैं "एक HTML स्ट्रिंग से एक डोम नोड बनाएं" जो हमारे यहां है लेकिन अधिक विस्तार से और अधिक गॉच के साथ कवर करता है।
विफल हो जाएगा क्योंकि यह एक याद आ रही है। #####