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

Posted 2023-03-05

【中文标题】如何在 javascript 中获取 DOM 元素的 HTML

【英文标题】：How to get the HTML for a DOM element in javascript

【发布时间】：2010-12-18 07:42:31

【问题描述】：

假设我有以下 html：

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

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

<span>...</span>

有什么想法吗？谢谢

【参考方案1】：

使用outerHTML：

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

【讨论】：

不，它是一个 IE 扩展。尽管存在 Firefox 解决方法：snipplr.com/view/5460/outerhtml-in-firefox

基于 WebKit 的浏览器似乎支持它，但 Firefox 不支持。

根据quirksmode.org/dom/w3c_html.html，它应该可以在IE、Opera、Safari和Chrome中运行。

注意outerHTML是HTML5的一部分，所以大家应该及时支持。

outerHTML 从 FF11 开始支持：developer.mozilla.org/en-US/docs/Web/API/element.outerHTML。

【参考方案2】：

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

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

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

【讨论】：

嗨 - 总的来说，这可能是我最好的选择。对分离/附加元素有点警惕，我不能搞砸 DOM，我不希望有大树。

除非 myElement 是不能是 div 的子元素的元素，例如 li、表格行或表格单元格等。

现在是 2013 年，调用“domnode.outerHTML”适用于所有主流浏览器（自 v11 起为 FF）

【参考方案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 不兼容跨浏览器。

【讨论】：

获取 div 父级的 innerHTML 的问题是我还要获取 div 的兄弟姐妹的 innerHTML

我的错，我认为“在元素上放置一个 id 属性”指的是“元素”。通过您的最后一次编辑，您想在汤中添加额外的div 就更清楚了:)

@J-P：如果元素不在document...那它在哪里，你愿意赐教吗？

@JP：当然你可以在你想要的地方创建元素，但这是不拒绝投票的理由......你不会在这里结交很多朋友那种态度。

非常确定outerHTML已经跨浏览器兼容很久了——不要害怕使用它。

【参考方案4】：

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

document.querySelector('div').outerHTML

【参考方案5】：

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

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

    return container.innerHTML;

【讨论】：

这会在调用时从文档中删除element，对吧？

现在可以通过添加 cloneNode 来解决这个问题，这使得它与此处的其他一些答案几乎相同。

【参考方案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

【参考方案7】：

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

【讨论】：

考虑添加为什么这是最好的解决方案，因为 OP 从未提及 jquery

【参考方案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 中

【参考方案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;
    ;
  ;

【参考方案10】：

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

【讨论】：

这也会给我 div 的兄弟姐妹的任何 html 对吗？

投反对票是怎么回事？最初的问题与兄弟姐妹无关。考虑到问题的原始上下文，这个答案是一个完全有效的答案。

另一方面，最初的问题与父母无关。所以，无论如何。