Imagine I have the following HTML:
<div><span><b>This is in bold</b></span></div>
I want to get the HTML for the div, including the div itself. Element.innerHTML only returns:
<span>...</span>
Any ideas? Thanks
Add a comment
|
10 Answers
Use outerHTML:
var el = document.getElementById( 'foo' );
alert( el.outerHTML );
9 Comments
Wim
No it's an IE extension. Although there exist Firefox workarounds: snipplr.com/view/5460/outerhtml-in-firefox
Jørn Schou-Rode
WebKit based browsers seem to support it, but Firefox doesn't.
Majkel
According to quirksmode.org/dom/w3c_html.html it should work in IE, Opera, Safari and Chrome.
Tab Atkins-Bittner
Note that outerHTML is part of HTML5, and so should be supported by everyone in time.
Felix Kling
outerHTML is supported since FF11: developer.mozilla.org/en-US/docs/Web/API/element.outerHTML. |
Expanding on jldupont's answer, you could create a wrapping 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 the element to avoid having to remove and reinsert the element in the actual document. This might be expensive if the element you wish to print has a very large tree below it, though.
3 Comments
Richard H
hi - on balance this is probably my best option. a little wary of detaching/attaching elements, I can't screw up the DOM, and I do not expect there to be large trees.
RobG
Unless myElement is an element that can't be a child of a div, like an li, table row or table cell and so on.
Kevin
Now that it's 2013, calling "domnode.outerHTML" works on all major browsers (FF since v11)
First, put on element that wraps the div in question, put an id attribute on the element and then use getElementById on it: once you've got the lement, just do 'e.innerHTML` to retrieve 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 is not cross-browser compatible.
5 Comments
Richard H
the problem with getting the innerHTML for the div's parent is that I'll also get the innerHTML for the div's siblings
Jørn Schou-Rode
My bad, I thought the "put an id attribute on the element" referred to "the element". With your last edit it is a lot clearer that you want to add an additional
div to the soup :)
jldupont
@J-P: if the element is not in the
document... then where is it, do you care to enlighten us all?jldupont
@J-P: of course you can create elements where you want but this is no reason for a down-vote... you won't make much friends around here with that sort of attitude.
Snow
Pretty sure outerHTML has been cross-browser compatible for a long, long time - don't be afraid of using it.
old question but for newcomers that come around :
document.querySelector('div').outerHTML
Comments
You'll want something like this for it to be cross browser.
function OuterHTML(element) {
var container = document.createElement("div");
container.appendChild(element.cloneNode(true));
return container.innerHTML;
}
2 Comments
Jørn Schou-Rode
This would remove
element from the document when called, right?
Nikolas Stephan
It would, have fixed that now by adding cloneNode, which makes it pretty much identical to some of the other answers here.
If you want a lighter footprint, but a longer script, get the elements innerHTML and only create and clone the empty parent-
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
}
Comments
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;
}
creates a bogus empty element of the type parent and uses innerHTML on it and then reattaches the element back into the normal dom
Comments
var x = $('#container').get(0).outerHTML;
1 Comment
RAZERZ
Consider adding WHY this is the best solution since OP never mentioned jquery
define function outerHTML based on support for element.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;
};
};
Comments
var el = document.getElementById('foo');
el.parentNode.innerHTML;
3 Comments
Richard H
this will also give me any html for the div's siblings though right?
Jason Leveille
What's up with the down vote? The original question had nothing to do with siblings. This answer was a perfectly valid answer given the original context of the question.
Jason Leveille
On the other hand, the original question had nothing to do with a parent. So, whatever.