स्ट्रिंग से एक DOM दस्तावेज़ बनाएं, बिना JQuery

हम DOM दस्तावेज़ स्ट्रिंग से जावास्क्रिप्ट में बनाने के तरीकों की तलाश में हैं, लेकिन Jquery का उपयोग किए बिना। ऐसा करने का कोई तरीका है? [मुझे ऐसा लगता है, क्योंकि Jquery इसे कर सकता है!]स्ट्रिंग से एक DOM दस्तावेज़ बनाएं, बिना JQuery

उन उत्सुक लोगों के लिए, हम jquery का उपयोग नहीं कर सकते हैं, क्योंकि हम क्रोम एप्लिकेशन की सामग्री स्क्रिप्ट के संदर्भ में ऐसा कर रहे हैं, और Jquery का उपयोग करना हमारी सामग्री लिपि बहुत भारी है।

स्रोत

2012-03-07 Julien Genestoux

यदि आप अभी भी एक एवर की तलाश में हैं, और किसी और के लिए यह आ रहा है, तो मैं बस वही काम करने की कोशिश कर रहा हूं। ऐसा लगता है आप जावास्क्रिप्ट के DOMImplementation पर विचार करना चाहते हैं:

http://reference.sitepoint.com/javascript/DOMImplementation

कुछ संदर्भ के रूप में अच्छी तरह से यहाँ संगतता के लिए कर रहे हैं, लेकिन यह काफी अच्छी तरह से समर्थित है।

संक्षेप में, हेरफेर करने के लिए एक नया दस्तावेज़ बनाने के लिए, आप एक नया डॉक्टरेट ऑब्जेक्ट बनाना चाहते हैं (यदि आप कुछ मानक आधारित सामग्री आउटपुट करने जा रहे हैं) और फिर नए बनाए गए डॉक्ट टाइप वैरिएबल का उपयोग करके नया दस्तावेज़ बनाएं।

दोनों डॉक्टरेट और दस्तावेज़ में डालने के लिए कई विकल्प हैं, लेकिन यदि आप एक HTML5 दस्तावेज़ बना रहे हैं, तो ऐसा लगता है कि आप उनमें से अधिकतर खाली तारों को छोड़ना चाहते हैं।

उदाहरण (नया एचटीएमएल 5 डोम दस्तावेज):

var doctype = document.implementation.createDocumentType('html', '', ''); 

var dom = document.implementation.createDocument('', 'html', doctype);

नए दस्तावेज़ अब इस तरह दिखता है:

<!DOCTYPE html> 
<html> 
</html>

उदाहरण (नया एक्सएचटीएमएल डोम दस्तावेज):

var doctype = document.implementation.createDocumentType(
    'html', 
    '-//W3C//DTD XHTML 1.0 Strict//EN', 
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd' 
); 

var dom = document.implementation.createDocument(
    'http://www.w3.org/1999/xhtml', 
    'html', 
    doctype 
);

तो यह बाकी है कि आप इसे बाकी बना दें। आप

dom.documentElement.innerHTML = '<head></head><body></body>';

बदलने के रूप में बस ऐसा करने या और अधिक कठोर के साथ जा सकते हैं:

var head = dom.createElement('head'); 
var body = dom.createElement('body'); 
dom.documentElement.appendChild(head); 
dom.documentElement.appendChild(body);

सभी तुम्हारा।

स्रोत

2012-08-17 12:42:01 woosteln

जेएस + एडोब एयर के घंटे के बाद 'document.implementation.createHTMLDocument'' के साथ मेरे '' टैग खाने के बाद, यह मेरी समस्या तय कर चुका है! बहुत बहुत धन्यवाद !! –

मेरे पास दस्तावेज़ है। शून्य है। लेकिन createHTML दस्तावेज़ के साथ कोई हेड टैग नहीं है। :( – holden321

var dom = '<html><head>....</head><body>...</body></html>'; 

document.write(dom); 
document.close();

स्रोत

2012-03-07 09:39:40 Manatok

इस दस्तावेज़ के वर्तमान सामग्री पर हावी नहीं होगा? –

क्या वह मुद्दा नहीं था? हो सकता है कि मैंने – Manatok

को गलत समझा, नहीं, मैं बस एक नया दस्तावेज़ बनाने और उस पर संचालन करने में सक्षम होना चाहता हूं, लेकिन निश्चित रूप से पिछले एक से छुटकारा नहीं पा रहा हूं :( –

एचटीएमएल यह चाहते हैं:

<html> 
<head></head> 
<body> 
    <div id="toolbar_wrapper"></div> 
</body> 
</html>

जे एस इस प्रकार दिखाई देगा:

var data = '<div class="toolbar">'+ 
       '<button type="button" class="new">New</button>'+ 
       '<button type="button" class="upload">Upload</button>'+ 
       '<button type="button" class="undo disabled">Undo</button>'+ 
       '<button type="button" class="redo disabled">Redo</button>'+ 
       '<button type="button" class="save disabled">Save</button>'+ 
      '</div>'; 
document.getElementById("toolbar_wrapper").innerHTML = data;

स्रोत

2012-03-07 09:40:45

createDocumentFragment आपकी मदद कर सकता है।

https://developer.mozilla.org/En/DOM/DocumentFragment

ब्राउज़र हमेशा खाली पेज (: खाली के बारे में) के साथ खुद से दस्तावेज़ बनाएँ। शायद, क्रोम एप्लिकेशन में कुछ फ़ंक्शन उपलब्ध हैं (जैसे एफएफ में एक्सयूएल), लेकिन सामान्य जावास्क्रिप्ट में ऐसा कोई फ़ंक्शन नहीं है।

स्रोत

2012-03-07 09:43:36 kirilloid

तो यह प्रतीत होता है कि दुर्भाग्यवश, दस्तावेज़फ्रेगमेंट को स्ट्रिंग से पॉप्युलेट नहीं किया जा सकता , जो मुझे चाहिए वह फिट नहीं होगा :( –

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

var parser = new DOMParser(); 
var doc = parser.parseFromString("<html_string>", "text/html");

(जिसके परिणामस्वरूप doc चर एक documentFragment वस्तु है)।

स्रोत

2016-01-05 12:50:45 apratimankur

मैंने यहां कुछ अन्य तरीकों की कोशिश की लेकिन जहां क्रोम जैसे स्क्रिप्ट तत्व बनाने में समस्याएं वास्तविक .js फ़ाइल को लोड करने से इनकार करते हैं तो src विशेषता द्वारा इंगित किया जाता है। नीचे मेरे लिए सबसे अच्छा काम करता है।

यह jQuery से 3x तेज और डोमपार्सर का उपयोग करने से 3.5x तेज है, लेकिन प्रोग्रामेटिक रूप से तत्व बनाने से 2x धीमी है।
https://www.measurethat.net/Benchmarks/Show/2149/0

Object.defineProperty(HTMLElement, 'From', { 
    enumerable: false, 
    value: (function (document) { 
     //https://www.measurethat.net/Benchmarks/Show/2149/0/element-creation-speed 
     var rgx = /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g; 
     return function CreateElementFromHTML(html) { 
      html = html.trim(); 
      var bodystart = html.indexOf('>') + 1, bodyend = html.lastIndexOf('<'); 
      var elemStart = html.substr(0, bodystart); 
      var innerHTML = html.substr(bodystart, bodyend - bodystart); 
      rgx.lastIndex = 0; 
      var elem = document.createElement(rgx.exec(elemStart)[4]); 
      var match; while ((match = rgx.exec(elemStart))) { 
       if (match[1] === undefined) { 
        elem.setAttribute(match[4], ""); 
       } else { 
        elem.setAttribute(match[1], match[3]); 
       } 
      } 
      elem.innerHTML = innerHTML; 
      return elem; 
     }; 
    }(window.document)) 
});

प्रयोग उदाहरण:

HTMLElement.From(`<div id='elem with quotes' title='Here is "double quotes" in single quotes' data-alt="Here is 'single quotes' in double quotes"><span /></div>`); 
HTMLElement.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async href="https://localhost/.js/sites/reddit/zinject.reddit.css">`); 
HTMLElement.From(`<script id="reddit_js" type="text/javascript" async defer src="https://localhost/.js/sites/reddit/zinject.reddit.js"></script>`); 
HTMLElement.From(`<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`); 
HTMLElement.From(`<div id='Sidebar' class='sidebar' display=""><div class='sb-handle'></div><div class='sb-track'></div></div>`);

स्रोत

2017-12-12 19:21:45

स्ट्रिंग से एक DOM दस्तावेज़ बनाएं, बिना JQuery

उत्तर

संबंधित मुद्दे