如何在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