如何在JavaScript中获取DOM元素的HTML

假设我有以下HTML：

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

我想获取div的HTML，包括div本身。Element.innerHTML仅返回：

<span>...</span>

有任何想法吗？谢谢

扩展jldupont的答案，您可以即时创建一个包装元素：

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

我正在克隆该元素，以避免必须删除该元素并将其重新插入到实际文档中。但是，如果您要打印的元素下面有一个很大的树，这可能会很昂贵。

用途outerHTML：

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

首先，放入包裹有div问题的元素，在元素上放置一个id属性，然后getElementById在其上使用：一旦获得了元素，只需执行'e.innerHTML`即可检索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>

然后：

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

请注意，outerHTML它与跨浏览器不兼容。

如果您希望使用更轻便的脚本，但需要更长的脚本，请获取元素innerHTML，然后仅创建并克隆空的父级-

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;

由于externalHTML仅是IE，请使用以下功能：

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

创建一个父类型的虚假空元素，并在其上使用innerHTML，然后将该元素重新附加到普通dom中

您将需要类似这样的东西才能跨浏览器。

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

    return container.innerHTML;
}

旧问题，但对于新来者：

document.querySelector('div').outerHTML

基于对element.outerHTML的支持来定义函数externalHTML：

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;