Cara mendapatkan HTML untuk elemen DOM di javascript


94

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

Jawaban:


87

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.


hai - pada keseimbangan ini mungkin pilihan terbaik saya. sedikit berhati-hati dalam melepaskan / memasang elemen, saya tidak dapat mengacaukan DOM, dan saya tidak berharap akan ada pohon besar.
Richard H

Kecuali myElement adalah elemen yang tidak bisa menjadi turunan dari div, seperti li, baris tabel atau sel tabel dan seterusnya.
RobG

20
Sekarang tahun 2013, memanggil "domnode.outerHTML" berfungsi di semua browser utama (FF sejak v11)
Kevin

88

Penggunaan outerHTML:

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

2
Tidak, itu ekstensi IE. Meskipun ada solusi Firefox: snipplr.com/view/5460/outerhtml-in-firefox
Wim

1
Browser berbasis WebKit tampaknya mendukungnya, tetapi Firefox tidak.
Jørn Schou-Rode

2
Menurut quirksmode.org/dom/w3c_html.html itu harus bekerja di IE, Opera, Safari dan Chrome.
Majkel

18
Perhatikan bahwa HTML luar adalah bagian dari HTML5, dan karenanya harus didukung oleh semua orang pada waktunya.
Xanthir


8

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.


1
masalah dengan mendapatkan innerHTML untuk div induk adalah bahwa saya juga akan mendapatkan innerHTML untuk saudara kandung div
Richard H

Saya buruk, saya pikir "meletakkan atribut id pada elemen" mengacu pada "elemen". Dengan suntingan terakhir Anda, jauh lebih jelas bahwa Anda ingin menambahkan tambahan divpada sup :)
Jørn Schou-Rode

@JP: jika elemennya tidak ada di document... lalu di mana, apakah Anda peduli untuk mencerahkan kami semua?
jldupont

@JP: tentu saja Anda dapat membuat elemen di mana Anda inginkan tetapi ini bukan alasan untuk tidak memilih ... Anda tidak akan mendapat banyak teman di sini dengan sikap seperti itu.
jldupont

Cukup yakin HTML luar telah kompatibel lintas-browser untuk waktu yang sangat lama - jangan takut menggunakannya.
Salju

3

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
}


2

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


2

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

1
Ini akan dihapus elementdari dokumen saat dipanggil, bukan?
Jørn Schou-Rode

Itu akan, telah memperbaikinya sekarang dengan menambahkan cloneNode, yang membuatnya sangat identik dengan beberapa jawaban lain di sini.
Nikolas Stephan

1

pertanyaan lama tetapi untuk pendatang baru yang datang:

document.querySelector('div').outerHTML


0

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

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

4
ini juga akan memberi saya html apa pun untuk saudara kandung div, bukan?
Richard H

Ada apa dengan suara bawah? Pertanyaan awal tidak ada hubungannya dengan saudara kandung. Jawaban ini adalah jawaban yang sangat valid mengingat konteks asli pertanyaan tersebut.
Jason Leveille

Di sisi lain, pertanyaan awal tidak ada hubungannya dengan orang tua. Terserah.
Jason Leveille
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.