Cara mendapatkan HTML untuk elemen DOM di javascript

Bayangkan saya memiliki HTML berikut:

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

Saya ingin mendapatkan HTML untuk div, termasuk div itu sendiri. Element.innerHTML hanya mengembalikan:

<span>...</span>

Ada ide? Terima kasih

Memperluas jawaban jldupont, Anda dapat membuat elemen pembungkus dengan cepat:

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

Saya mengkloning elemen untuk menghindari keharusan menghapus dan memasukkan kembali elemen tersebut ke dalam dokumen sebenarnya. Ini mungkin mahal jika elemen yang ingin Anda cetak memiliki pohon yang sangat besar di bawahnya.

Penggunaan outerHTML:

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

Pertama, letakkan elemen yang membungkus divpertanyaan, letakkan idatribut pada elemen dan kemudian gunakan getElementByIddi atasnya: setelah Anda mendapatkan lement, lakukan saja 'e.innerHTML` untuk mengambil HTML.

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

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

lalu:

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

Perhatikan bahwa outerHTMLtidak kompatibel lintas-browser.

Jika Anda ingin jejak ringan, tapi script lagi, dapatkan elemen innerHTML dan hanya membuat dan mengkloning kosong orangtua-

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
}

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

karena outerHTML hanya untuk IE, gunakan fungsi ini:

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;
}

membuat elemen kosong palsu dari tipe induk dan menggunakan innerHTML di atasnya lalu memasang kembali elemen tersebut kembali ke dom normal

Anda akan menginginkan sesuatu seperti ini untuk menjadi lintas browser.

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

    return container.innerHTML;
}

pertanyaan lama tetapi untuk pendatang baru yang datang:

document.querySelector('div').outerHTML

definisikan fungsi luarHTML berdasarkan dukungan untuk element.outerHTML:

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;
    };
  };

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