JavaScript में कस्टम URL के साथ HTML डॉक्यूमेंट कैसे बनाएं?

document.implementation.createHTMLDocument() से नया HTML डॉक्यूमेंट बनाएं, फिर <base> एलिमेंट से कस्टम बेस URL सेट करें।

बुनियादी उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>कस्टम URL डॉक्यूमेंट</title>
</head>
<body>
    <script>
        // नया खाली HTML डॉक्यूमेंट बनाएं
        const htmlDocument = document.implementation.createHTMLDocument();
        
        // बेस URL एलिमेंट बनाएं
        const baseElement = htmlDocument.createElement('base');
        baseElement.href = "https://www.example.com/base/path/";
        
        // हेड में जोड़ें
        htmlDocument.head.appendChild(baseElement);
        
        console.log("बेस URL:", baseElement.href);
        
        // रिलेटिव लिंक बनाएं - बेस URL के सापेक्ष रिजॉल्व होगा
        const link = htmlDocument.createElement("a");
        link.href = "page.html";  // रिलेटिव URL
        htmlDocument.body.appendChild(link);
        
        console.log("रिजॉल्व्ड URL:", link.href);
        // https://www.example.com/base/path/page.html
    </script>
</body>
</html>

उपयोग के मामले

• टेम्पलेट रेंडरिंग - अलग डॉक्यूमेंट में HTML जनरेट करें
• पार्सिंग - HTML स्ट्रिंग को डॉक्यूमेंट में पार्स करके क्वेरी करें
• आइसोलेशन - मुख्य डॉक्यूमेंट को प्रभावित किए बिना मैनिपुलेशन
• प्रिंटिंग - प्रिंट के लिए अलग डॉक्यूमेंट तैयार करें

HTML स्ट्रिंग से डॉक्यूमेंट बनाएं

const htmlString = `<html><body><h1>Hello</h1></body></html>`;

const doc = new DOMParser().parseFromString(htmlString, "text/html");
console.log(doc.body.innerHTML); // "<h1>Hello</h1>"

डॉक्यूमेंट में क्वेरी करें

const doc = document.implementation.createHTMLDocument();
doc.body.innerHTML = `
    <div class="container">
        <p class="text">कंटेंट</p>
    </div>
`;

const text = doc.querySelector('.text').textContent;
console.log(text); // "कंटेंट"

चलाने का तरीका

ब्राउज़र कंसोल में चलाएं या HTML फ़ाइल में शामिल करके खोलें।

आउटपुट

बेस URL: https://www.example.com/base/path/
रिजॉल्व्ड URL: https://www.example.com/base/path/page.html

ब्राउज़र सपोर्ट

नोट

बनाया गया डॉक्यूमेंट मुख्य पेज से पूरी तरह अलग होता है - इसके स्क्रिप्ट्स नहीं चलते, स्टाइल्स लागू नहीं होते, जब तक आप मैन्युअली न जोड़ें।