, wie die HTML für ein DOM-Element in Javascript bekommen

Question

Stellen Ich habe folgende HTML:

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

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

<span>...</span> 

Irgendwelche Ideen? Dank

Answer 1

Erweiterung auf jldupont Antwort, könnten Sie eine Umschlingungselement on the fly erstellen:

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

ich das Element am Klonen zu vermeiden, um das Element in dem Dokument zu entfernen und wieder einsetzen. Dies kann teuer sein, wenn das Element, das Sie drucken möchten, einen sehr großen Baum darunter hat.

Answer 2

Zuerst auf Element setzen, die wickeln die div in Frage, legen ein id Attribut für das Element und dann getElementById auf sich aus: sobald Sie den lement haben, nur tun ‚e.innerHTML` den HTML-Code abrufen .

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

Hinweis dass outerHTML nicht Cross-Browser kompatibel ist.

Answer 3

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

Answer 4

Verwenden outerHTML:

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

Answer 5

als Outerhtml nur IE, diese Funktion:

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

erzeugt ein Schein leeres Element des Typs Mutter und verwendet innerHTML- darauf und dann fügt das Element wieder in das normale Dom

Answer 6

Sie werden so etwas für das t wollen o Cross-Browser sein.

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

    return container.innerHTML; 
} 

Answer 7

Wenn Sie einen leichten Fußabdruck wollen, aber eine längere Skript, erhalten die Elemente innerHTML- und nur erstellen und klonen die leer Eltern-

Answer 8

definiert Funktion Outerhtml basierend auf Unterstützung für element.outerHTML:

Answer 9

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