So erhalten Sie den HTML-Code für ein DOM-Element in Javascript

Stellen Sie sich vor, ich habe folgenden HTML-Code:

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

Ich möchte den HTML-Code für das Div erhalten, einschließlich des Div selbst. Element.innerHTML gibt nur Folgendes zurück:

<span>...</span>

Irgendwelche Ideen? Vielen Dank

Wenn Sie die Antwort von jldupont erweitern, können Sie im laufenden Betrieb ein Wrapping-Element erstellen:

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

Ich klone das Element, um zu vermeiden, dass das Element entfernt und erneut in das eigentliche Dokument eingefügt werden muss. Dies kann jedoch teuer sein, wenn das zu druckende Element einen sehr großen Baum darunter hat.

Verwendung outerHTML:

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

Setzen Sie zuerst divein Element ein, das das betreffende idElement getElementByIdumschließt, fügen Sie dem Element ein Attribut hinzu und verwenden Sie es dann: Wenn Sie das Element haben, führen Sie einfach 'e.innerHTML' aus, um den HTML-Code abzurufen.

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

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

und dann:

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

Beachten Sie, dass dies outerHTMLnicht browserübergreifend kompatibel ist.

Wenn Sie einen geringeren Platzbedarf, aber ein längeres Skript wünschen, holen Sie sich die Elemente innerHTML und erstellen und klonen Sie nur das leere übergeordnete Element.

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;

Verwenden Sie diese Funktion, da OuterHTML nur IE ist:

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

Erstellt ein falsches leeres Element vom Typ "Parent" und verwendet innerHTML. Anschließend wird das Element wieder in den normalen Dom eingefügt

Sie möchten, dass so etwas browserübergreifend ist.

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

    return container.innerHTML;
}

alte Frage, aber für Neuankömmlinge, die vorbeikommen:

document.querySelector('div').outerHTML

Definieren Sie die Funktion OuterHTML basierend auf der Unterstützung von 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;