Jak uzyskać kod HTML dla elementu DOM w javascript


94

Wyobraź sobie, że mam następujący HTML:

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

Chcę pobrać kod HTML dla elementu div, w tym samego elementu div. Element.innerHTML zwraca tylko:

<span>...</span>

Jakieś pomysły? Dzięki

Odpowiedzi:


87

Rozwijając odpowiedź jlduponta, możesz stworzyć element opakowujący w locie:

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

Klonuję element, aby uniknąć konieczności usuwania i ponownego umieszczania elementu w rzeczywistym dokumencie. Może to być kosztowne, jeśli element, który chcesz wydrukować, ma pod nim bardzo duże drzewo.


cześć - w sumie to chyba moja najlepsza opcja. trochę nieufnie co do odłączania / mocowania elementów, nie mogę zepsuć DOM-a i nie spodziewam się, że będą tam duże drzewa.
Richard H

Chyba że myElement jest elementem, który nie może być elementem podrzędnym elementu div, takim jak li, wiersz tabeli lub komórka tabeli i tak dalej.
RobG

20
Teraz, gdy jest rok 2013, wywołanie „domnode.outerHTML” działa we wszystkich głównych przeglądarkach (FF od wersji 11)
Kevin

89

Zastosowanie outerHTML:

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

2
Nie, to rozszerzenie IE. Chociaż istnieją obejścia dla Firefoksa: snipplr.com/view/5460/outerhtml-in-firefox
Wim

1
Wydaje się, że przeglądarki oparte na WebKit go obsługują, ale Firefox nie.
Jørn Schou-Rode

2
Według quirksmode.org/dom/w3c_html.html powinien on działać w IE, Opera, Safari i Chrome.
Majkel

18
Zauważ, że externalHTML jest częścią HTML5 i dlatego powinien być obsługiwany przez wszystkich na czas.
Xanthir


8

Najpierw umieść element, który zawija dane divpytanie, umieść idatrybut na elemencie, a następnie użyj getElementByIdna nim: kiedy już masz lement, po prostu zrób 'e.innerHTML`, aby pobrać 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>

i wtedy:

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

Zauważ, że outerHTMLnie jest kompatybilny z różnymi przeglądarkami.


1
Problem z uzyskaniem innerHTML dla rodzica div polega na tym, że otrzymam również innerHTML dla rodzeństwa div
Richard H

Moja zła, pomyślałem, że „umieść atrybut id na elemencie” odnosi się do „elementu”. Po ostatniej edycji jest o wiele wyraźniejsze, że chcesz dodać dodatek divdo zupy :)
Jørn Schou-Rode

@JP: jeśli elementu nie ma w document... to gdzie on jest, czy chcesz nas wszystkich oświecić?
jldupont

@JP: oczywiście możesz tworzyć elementy tam, gdzie chcesz, ale to nie jest powód do głosowania przeciwnego… z takim nastawieniem nie zdobędziesz wielu przyjaciół.
jldupont

Jestem prawie pewien, że zewnętrznyHTML był kompatybilny z różnymi przeglądarkami przez długi, długi czas - nie bój się go używać.
Śnieg

3

Jeśli chcesz mieć lżejszy ślad, ale dłuższy skrypt, pobierz elementy innerHTML i utwórz i sklonuj tylko pusty element nadrzędny-

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

ponieważ externalHTML to tylko IE, użyj tej funkcji:

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

tworzy fałszywy pusty element typu parent i używa na nim innerHTML a następnie ponownie przyłącza element z powrotem do normalnego dom


2

Będziesz chciał coś takiego, aby było to między przeglądarkami.

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

    return container.innerHTML;
}

1
To spowoduje usunięcie elementz dokumentu po wywołaniu, prawda?
Jørn Schou-Rode

Naprawiłoby to teraz, dodając cloneNode, co czyni go prawie identycznym z niektórymi innymi odpowiedziami tutaj.
Nikolas Stephan

1

stare pytanie, ale dla nowo przybyłych, którzy się pojawią:

document.querySelector('div').outerHTML


0

zdefiniuj funkcję externalHTML w oparciu o obsługę elementu.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
da mi to również dowolny kod HTML dla rodzeństwa div, prawda?
Richard H

Co słychać w głosowaniu przeciw? Pierwotne pytanie nie miało nic wspólnego z rodzeństwem. Ta odpowiedź była całkowicie poprawną odpowiedzią, biorąc pod uwagę pierwotny kontekst pytania.
Jason Leveille,

Z drugiej strony pierwotne pytanie nie miało nic wspólnego z rodzicem. Nieważne.
Jason Leveille,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.