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

想象一下，我有以下的HTML：

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

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

 <span>...</span> 

有任何想法吗？ 谢谢

Answer 1

扩展jldupont的答案，你可以创build一个dynamic的包装元素：

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

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

Answer 2

使用outerHTML ：

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

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

因为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; } 

创build父types的虚假空元素，并在其上使用innerHTML，然后将元素重新附加到正常的dom

Answer 5

你会想要这样的东西，它是跨浏览器。

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

Answer 6

如果你想要一个更轻的脚本，但脚本更长，得到元素innerHTML，只创build和克隆空的父 –

 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

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

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} // eg 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; }; };