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

Question

假设我有以下 HTML：

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

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

<span>...</span>

有什么想法吗？谢谢

Answer 1

使用outerHTML：

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

Answer 2

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

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

我正在克隆元素以避免在实际文档中删除并重新插入元素。但是，如果您要打印的元素下方有一棵非常大的树，这可能会很昂贵。

Answer 3

首先，放置包含相关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 不兼容跨浏览器。

Answer 4

老问题，但对于新来的人来说：

document.querySelector('div').outerHTML

Answer 5

你会想要这样的东西才能跨浏览器。

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

    return container.innerHTML;
}

Answer 6

如果你想要一个更轻的足迹，但更长的脚本，获取元素 innerHTML 并且只创建和克隆 empty 父级-

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
}

Answer 7

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

Answer 8

由于outerHTML 仅适用于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;
}

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

Answer 9

根据对element.outerHTML的支持定义函数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;
    };
  };

Answer 10

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