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

假设我有以下 HTML:

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

我想得到 div 的 HTML，包括 div 本身。 Element.innerHTML 只返回:

<span>...</span>

有什么想法吗? 谢谢

202887 次浏览
小开

首先，放置一个包装有问题的 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不是跨浏览器兼容的。

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

使用 outerHTML:

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

as outerHTML is IE only, use this function:

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;
}
小开
最佳答案

在 jldupont 的答案的基础上，您可以动态地创建一个包装元素:

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

我正在克隆元素，以避免在实际文档中删除和重新插入元素。但是，如果您希望打印的元素下面有一个非常大的树，那么这可能会非常昂贵。

小开

如果您想要一个更轻的内存占用，但是一个更长的脚本，那么获取 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
}
小开

基于对 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;
};
};
小开 
var x = $('#container').get(0).outerHTML;
小开

这是个老问题，但是对于新来的人来说:

document.querySelector('div').outerHTML


提交答案