How to get HTML code for a DOM element in javascript

Question

Imagine I have the following HTML:

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

I want to get HTML for a div, including the div itself. Element.innerHTML returns only:

 <span>...</span> 

Any ideas? thank

Answer 1

By expanding jldupont's answer, you can create a carry element on the fly:

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

I am cloning an element to avoid having to delete and reinsert the element in the actual document. This can be expensive if the item you want to print has a very large tree underneath.

Answer 2

Use outerHTML :

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

Answer 3

First put on the element that wraps the div in the question, put the id attribute on the element, and then use getElementById on it: after you have the element, just do "e.innerHTML" to extract the 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>

and then:

 var e=document.getElementById("wrap"); var content=e.innerHTML; 

Note that outerHTML not compatible with multiple browsers.

Answer 4

If you need a lighter area but a longer script, get innerHTML elements and create and clone the parent 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 } 

Answer 5

You will need something similar to make it a cross browser.

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

Answer 6

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

Answer 7

as outerHTML is only IE, 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; } 

creates a dummy empty element of the parent type and uses innerHTML on it, and then binds the element to the normal dom again

Answer 8

define outerHTML function based on element.outerHTML support:

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

Answer 9

old question, but for newbies who come:

document.querySelector('div').outerHTML

Answer 10

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