想象一下，我有以下 HTML：
<div><span><b>This is in bold</b></span></div>
我想获取 div 的 HTML，包括 div 本身。Element.innerHTML 只返回：
<span>...</span>
有任何想法吗？谢谢
如何在 javascript 中获取 DOM 元素的 HTML
IT技术
javascript
html
dom
2021-02-01 16:28:50
6个回答
使用outerHTML：
var el = document.getElementById( 'foo' );
alert( el.outerHTML );
扩展 jldupont 的答案，您可以即时创建一个包装元素：
var target = document.getElementById('myElement');
var wrap = document.createElement('div');
wrap.appendChild(target.cloneNode(true));
alert(wrap.innerHTML);
我正在克隆该元素以避免在实际文档中删除并重新插入该元素。但是，如果您要打印的元素下面有一棵非常大的树，这可能会很昂贵。
首先，放置包含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不是跨浏览器兼容的。
老问题，但对于新人来说：
document.querySelector('div').outerHTML
你会想要这样的东西，因为它是跨浏览器的。
function OuterHTML(element) {
var container = document.createElement("div");
container.appendChild(element.cloneNode(true));
return container.innerHTML;
}