जावास्क्रिप्ट में एक DOM तत्व के लिए HTML कैसे प्राप्त करें

Question

कल्पना कीजिए कि मेरे पास निम्न HTML है:

<div><span><b>This is in bold</b></span></div>

मैं div के लिए HTML, div सहित ही प्राप्त करना चाहता हूँ। Element.innerHTML केवल रिटर्न:

<span>...</span>

कोई विचार? धन्यवाद

Answer 1

Jldupont के उत्तर पर विस्तार करते हुए, आप मक्खी पर एक रैपिंग तत्व बना सकते हैं:

var target = document.getElementById('myElement');
var wrap = document.createElement('div');
wrap.appendChild(target.cloneNode(true));
alert(wrap.innerHTML);

मैं वास्तविक दस्तावेज़ में तत्व को निकालने और पुनः स्थापित करने से बचने के लिए तत्व का क्लोनिंग कर रहा हूं। यह महंगा हो सकता है यदि आप जिस तत्व को प्रिंट करना चाहते हैं, उसके नीचे एक बहुत बड़ा पेड़ है, हालांकि।

Comments

हाय - संतुलन पर यह शायद मेरा सबसे अच्छा विकल्प है। तत्वों को अलग करने / संलग्न करने से थोड़ा सावधान, मैं DOM को खराब नहीं कर सकता, और मुझे उम्मीद नहीं है कि बड़े पेड़ होंगे।

— रिचर्ड एच

जब तक myElement एक ऐसा तत्व है जो div, टेबल रो या टेबल सेल और इतने पर जैसे डिव का बच्चा नहीं हो सकता है।

— रोब

अब जब कि यह 2013 है, "domnode.outerHTML" को कॉल करना सभी बड़े ब्राउज़रों (v11 के बाद से FF) पर काम करता है

— केविन

Answer 2

उपयोग करें outerHTML:

var el = document.getElementById( 'foo' );
alert( el.outerHTML );

Comments

नहीं, यह एक IE विस्तार है। यद्यपि फ़ायरफ़ॉक्स वर्कअराउंड मौजूद है: snipplr.com/view/5460/outerhtml-in-firefox

— Wim

WebKit आधारित ब्राउज़र इसका समर्थन करते हैं, लेकिन फ़ायरफ़ॉक्स नहीं करता है।

— जोर्न शॉ-रोड

Quirksmode.org/dom/w3c_html.html के अनुसार इसे IE, ओपेरा, सफारी और क्रोम में काम करना चाहिए।

— मजलेल

ध्यान दें कि बाहरी HTML HTML5 का हिस्सा है, और इसलिए समय में सभी का समर्थन किया जाना चाहिए।

— Xanthir

outerHTMLFF11 के बाद से समर्थित है: developer.mozilla.org/en-US/docs/Web/API/element.outer HTML ।

— फेलिक्स क्लिंग

Answer 3

सबसे पहले, उस तत्व को divडालें जो प्रश्न में लपेटता है , idतत्व पर एक विशेषता डालें और फिर उस getElementByIdपर उपयोग करें : एक बार जब आपको लेमेंट मिल जाता है, तो बस HTML पुनः प्राप्त करने के लिए 'e.innerHTML` करें।

<div><span><b>This is in bold</b></span></div>

=> <div id="wrap"><div><span><b>This is in bold</b></span></div></div>

और फिर:

var e=document.getElementById("wrap");
var content=e.innerHTML;

ध्यान दें कि outerHTMLक्रॉस-ब्राउज़र संगत नहीं है।

Comments

div के माता-पिता के लिए

— रिचर्ड एच

मेरा बुरा, मैंने सोचा कि "तत्व पर एक आईडी विशेषता डाल" "तत्व" को संदर्भित करता है। अपने अंतिम संपादन के साथ यह बहुत स्पष्ट है कि आप divसूप में एक अतिरिक्त जोड़ना चाहते हैं :)

— जोर्न शॉ-रोड

@ जेपी: यदि तत्व में नहीं है document... तो यह कहां है, क्या आप हम सभी को बताएंगे ?

— jldupont

@ जेपी: बेशक आप ऐसे तत्व बना सकते हैं जहाँ आप चाहते हैं, लेकिन यह डाउन-वोट का कोई कारण नहीं है ... आप उस तरह के रवैये के साथ यहां बहुत दोस्त नहीं बनाएंगे।

— jldupont

बहुत यकीन है कि बाहरी HTML एक लंबे, लंबे समय के लिए संगत क्रॉस-ब्राउज़र है - इसका उपयोग करने से डरो मत।

— स्नो

Answer 4

यदि आप एक हल्का पदचिह्न चाहते हैं, लेकिन एक लंबी लिपि है, तो तत्वों को इनर HTML प्राप्त करें और केवल खाली माता-पिता को बनाएं और क्लोन करें-

function getHTML(who,lines){
    if(!who || !who.tagName) return '';

    var txt, ax, str, el= document.createElement('div');
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    ax= txt.indexOf('>')+1;
    str= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);

    el= null;
    return lines? str.replace(/> *</g,'>\n<'): str;
    //easier to read if elements are separated
}

Answer 5

var x = $('#container').get(0).outerHTML;

Answer 6

जैसा कि बाहरी HTML केवल IE है, इस फ़ंक्शन का उपयोग करें:

function getOuterHtml(node) {
    var parent = node.parentNode;
    var element = document.createElement(parent.tagName);
    element.appendChild(node);
    var html = element.innerHTML;
    parent.appendChild(node);
    return html;
}

प्रकार का मूल तत्व का फर्जी खाली तत्व बनाता है और उस पर इनर HTML का उपयोग करता है और फिर तत्व को सामान्य डोम में वापस भेजता है

Answer 7

आप इसके लिए क्रॉस ब्राउजर होना चाहते हैं।

function OuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));

    return container.innerHTML;
}

Comments

यह elementदस्तावेज़ से हटा दिया जाएगा जब बुलाया, सही?

— जोर्न शॉ-रोडे

यह तय हो जाता है कि अब क्लोनऑन को जोड़कर, जो यहां के कुछ अन्य उत्तरों के समान है।

— निकोलस स्टीफ़न

Answer 8

पुराना सवाल लेकिन नए लोगों के लिए जो आसपास आते हैं:

document.querySelector('div').outerHTML

Answer 9

फंक्शनबाह बाहरी एचटीएमएल को एलिमेंट के आधार पर परिभाषित करें। रूटर HTML:

var temp_container = document.createElement("div"); // empty div not added to DOM
if (temp_container.outerHTML){
    var outerHTML = function(el){return el.outerHTML||el.nodeValue} // e.g. textnodes do not have outerHTML
  } else { // when .outerHTML is not supported
    var outerHTML = function(el){
      var clone = el.cloneNode(true);
      temp_container.appendChild(clone);
      outerhtml = temp_container.innerHTML;
      temp_container.removeChild(clone);
      return outerhtml;
    };
  };

Answer 10

var el = document.getElementById('foo');
el.parentNode.innerHTML;

Comments

यह भी मुझे तलाक के भाई बहन के लिए किसी भी html हालांकि सही होगा?

— रिचर्ड एच

डाउन वोट के साथ क्या हो रहा है? मूल प्रश्न का भाई-बहनों से कोई लेना-देना नहीं था। यह उत्तर प्रश्न के मूल संदर्भ को देखते हुए पूरी तरह से मान्य उत्तर था।

— जेसन लेविले

दूसरी ओर, मूल प्रश्न का माता-पिता से कोई लेना-देना नहीं था। इसलिए जो कुछ भी हो।

— जेसन लेविल ने