DOM नोड का स्ट्रिंग प्रतिनिधित्व प्राप्त करें

Question

जावास्क्रिप्ट: मेरे पास एक नोड (तत्व या दस्तावेज़) का डोम प्रतिनिधित्व है और मैं इसके स्ट्रिंग प्रतिनिधित्व की तलाश कर रहा हूं। उदाहरण के लिए,

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

उपज चाहिए:

get_string(el) == "<p>Test</p>";

मेरे पास मजबूत भावना है, कि मैं कुछ सामान्य रूप से याद कर रहा हूं, लेकिन मुझे आईई, एफएफ, सफारी और ओपेरा में काम करने का तरीका नहीं मिला है। इसलिए, बाहरी HTML कोई विकल्प नहीं है।

Comments

: शायद 11 संस्करण के साथ फ़ायरफ़ॉक्स भी outerHTML का समर्थन करता है bugzilla.mozilla.org/show_bug.cgi?id=92264

— Boldewyn

अभी के लिए, IE, FF, Safari, Chrome, Opera सभी

— बाहरी HTML का

हाँ, यह अब (2009 से, वह है) एक तुच्छ कार्य बन गया है :)

— बोल्ड्यूविन

हाँ, निश्चित रूप से

— बाहरी HTML

Answer 1

आप एक अस्थायी मूल नोड बना सकते हैं, और इसके भीतर की HTML सामग्री प्राप्त कर सकते हैं:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>

संपादित करें: कृपया बाहरी HTML के बारे में नीचे उत्तर देखें। el.outerHTML को वह सब होना चाहिए जिसकी आवश्यकता है।

Comments

आउच। इतना सरल ... बस थोड़ा सा ध्यान दें: अगर मुझे पूरे दस्तावेज़ "स्ट्रिंग" चाहिए, तो मैं document.documentElement (usecase: AJAX अनुरोध) के साथ एक ही विधि का उपयोग कर सकता हूं। शायद आप जवाब में इसे शामिल कर सकते हैं?

— बोल्ड्यूवेन

@ बोल्डवेन: आप पूरे document.documentElementको एक डिव में जोड़ सकते हैं ? पवित्र बकवास ....

— Roatin Marth

सरल, नरक के रूप में ... +1 बहुत खराब दस्तावेज़फ्रेममेंट इनर HTML का समर्थन नहीं करता है

— लाजोस मेस्जारोस

— आउटरएचटीएमएल

जब आप इसे जोड़ते हैं , तो इसे becouse में elementजोड़ने से पहले अपना क्लोन बनाना न भूलें , इसे हटा दिया जाएगा । tmptmpdocument

— ऑल्के इरेटा

Answer 2

आप जो खोज रहे हैं वह 'बाहरी HTML' है, लेकिन हमें एक कमबैक coz की आवश्यकता है जो पुराने ब्राउज़रों के अनुकूल नहीं है।

var getString = (function() {
  var DIV = document.createElement("div");

  if ('outerHTML' in DIV)
    return function(node) {
      return node.outerHTML;
    };

  return function(node) {
    var div = DIV.cloneNode();
    div.appendChild(node.cloneNode(true));
    return div.innerHTML;
  };

})();

// getString(el) == "<p>Test</p>"

आपको यहां मेरा jQuery प्लगइन मिलेगा: चयनित तत्व का बाहरी HTML प्राप्त करें

Comments

outerHTMLप्रश्न पूछने के बाद फ़ायरफ़ॉक्स संस्करण 11 में जोड़ा गया। तो यह विकल्प नहीं था। मैंने भी आपके प्रश्न को एक उपयुक्त टिप्पणी के साथ अद्यतन किया, यदि आप बारीकी से देखते हैं।

— बोल्ड्यूविन

यह अधिकार, coz आप तत्व आईडी ड्रॉप और अन्य attrs अगर उपयोगinnerHtml

— सेर्गेई Panfilov

@SergeyPanfilov: मैंने कुछ भी नहीं छोड़ा क्योंकि मैंने कॉल करने से पहले एक खाली div में नोड लपेट दिया innerHTML; )

— gtournie

2015 में, मैं कहूंगा कि यह सबसे अच्छा जवाब है।

— ACK_stoverflow

हाँ, आज के रूप में, केवल बहुत पुराने (IE> 10, सफारी> 7, वास्तव में प्राचीन एफएफ, क्रोम) और / या अस्पष्ट ब्राउज़र (ओपेरा मिनी) outerHTMLविशेषता का समर्थन नहीं करते हैं । Caniuse.com/#feat=xml-serializer

— Gert Sønderby

Answer 3

मुझे नहीं लगता कि आपको इसके लिए किसी जटिल स्क्रिप्ट की आवश्यकता है। महज प्रयोग करें

get_string=(el)=>el.outerHTML;

Comments

यह सबसे अच्छा जवाब है

— Avraham

Answer 4

FF के तहत आप XMLSerializerXML को स्ट्रिंग में सीरियल करने के लिए ऑब्जेक्ट का उपयोग कर सकते हैं । IE आपको xmlनोड की संपत्ति देता है । तो आप निम्न कार्य कर सकते हैं:

function xml2string(node) {
   if (typeof(XMLSerializer) !== 'undefined') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

Comments

FYI करें .xmlDOM नोड्स (वर्तमान पृष्ठ में नोड्स के रूप में) पर काम नहीं करता है। यह केवल XML DOM डॉक्यूमेंट नोड्स पर काम करता है।

— वर्धमान ताजा

और इसके विपरीत, outerHTMLXML DOM डॉक्यूमेंट नोड्स पर काम नहीं करता है। यह केवल DOM नोड्स (वर्तमान पृष्ठ में नोड्स में) पर काम करता है। अच्छा है कि मैं कहूंगा।

— वर्धमान ताजा

Answer 5

तत्व का उपयोग करें # बाहरी HTML:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

console.log(el.outerHTML);

इसका उपयोग DOM तत्वों को लिखने के लिए भी किया जा सकता है। मोज़िला के दस्तावेज़ से:

तत्व DOM इंटरफ़ेस के बाहरी HTML विशेषता को सीरियल वंशानुगत HTML टुकड़ा मिलता है जिसमें इसके वंश सहित तत्व का वर्णन होता है। यह दिए गए स्ट्रिंग से पार्स किए गए नोड्स के साथ तत्व को बदलने के लिए सेट किया जा सकता है।

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

Answer 6

बाहरी टैग और विशेषताओं सहित तत्व का पूर्ण प्रतिनिधित्व प्राप्त करने के लिए element.outerHTML का उपयोग करें।

Answer 7

यदि आपके तत्व में माता-पिता हैं

element.parentElement.innerHTML

Comments

जवाब के लिए धन्यवाद! दुर्भाग्य से यह पहले से ही सुझाया गया था, लेकिन उत्तर देने वाले ने उत्तर हटा दिया। समस्या यह है, कि माता-पिता में वांछित से अधिक मार्कअप हो सकता है । <li>किसी सूची में एकल के लिए बाहरी HTML के बारे में सोचें ।

— बोल्डविन

Answer 8

प्रयत्न

new XMLSerializer().serializeToString(element);

Comments

सुझाव के लिए धन्यवाद, लेकिन यह वही है जो ब्रायन काले ने अपने उत्तर में सुझाया था।

— Boldewyn

Answer 9

मैंने पाया है कि मेरे उपयोग-मामलों के लिए मैं हमेशा संपूर्ण बाहरी HTML नहीं चाहता। कई नोड्स में बहुत सारे बच्चों को दिखाना है।

यहाँ एक समारोह (क्रोम में न्यूनतम परीक्षण किया गया है):

/**
 * Stringifies a DOM node.
 * @param {Object} el - A DOM node.
 * @param {Number} truncate - How much to truncate innerHTML of element.
 * @returns {String} - A stringified node with attributes
 *                     retained.
 */
function stringifyEl(el, truncate) {
    var truncateLen = truncate || 50;
    var outerHTML = el.outerHTML;
    var ret = outerHTML;
    ret = ret.substring(0, truncateLen);

    // If we've truncated, add an elipsis.
    if (outerHTML.length > truncateLen) {
      ret += "...";
    }
    return ret;
}

https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec

Answer 10

मैंने स्वीकार किए गए उत्तर में कोड के साथ डॉगल के माध्यम से पुनरावृति करने पर क्या गलत है, यह पता लगाने में बहुत समय बर्बाद किया है। यह मेरे लिए काम किया है, अन्यथा दस्तावेज़ से हर दूसरा तत्व गायब हो जाता है:

_getGpxString: function(node) {
          clone = node.cloneNode(true);
          var tmp = document.createElement("div");
          tmp.appendChild(clone);
          return tmp.innerHTML;
        },

Comments

मैं एक अंग पर बाहर नहीं जाता, जब मुझे लगता है, कि आपको यहाँ एक अलग समस्या है। ध्यान दें, कि उपरोक्त समाधान DOM से मूल तत्व को हटा देता है। इसलिए, जब आप एक लाइव संग्रह का उपयोग करते हैं document.getElementsByTagName(), तो वह संग्रह मध्य- forलूप को बदल देगा , इसलिए प्रत्येक दूसरे तत्व की लंघन।

— बोल्ड्यूवेन

Answer 11

यदि प्रतिक्रिया का उपयोग कर रहा है:

const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;

Comments

.outerHTMLप्रतिक्रिया-विशिष्ट नहीं है; यह एक DOM मानक है। @Rich Apodaca का उत्तर देखें।

— छारवे ११'१

हाँ ... मेरे जवाब पर ब्याज की बात (यदि प्रतिक्रिया का उपयोग कर रहा है) reactdom.findDOMNode()..., नहीं थी .outerHTML, लेकिन स्थिति के लिए धन्यवाद।

— विजोरकुराची