How do I do OuterHTML in firefox?

Question

Part of my code I get the OuterHTML propery

"<LI onclick="TabClicked(this, 'SearchName', 'TabGroup1');">Name "

so I can do stuff involing parsing it.

There is no OuterHTML property in javascript on firefox though and I can't find an alternative way to get this string. Ideas?

Solution 1

Figured it out!

child.getAttributeNode("OnClick").nodeValue;

getAttribute didn't work, but getAttributeNode worked great ;D

Solution 2

Here's the function we use in pure.js:

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

To use it the DOM way:

outerHTML(document.getElementById('theNode'));

And it works cross browsers

EDIT: WARNING! There is a trouble with XMLSerializer, it generates an XML(XHTML) string.
Which means you can end up with a tags like <div class="team" /> instead of
<div class="team"></div>
Some browsers do not like it. I had some pain with Firefox 3.5 recently.

So for our pure.js lib we came back to the old and safe way:

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
  }

Solution 3

The proper approach (for non-IE browsers) is:

var sOuterHTML = new XMLSerializer().serializeToString(oElement);

Solution 4

If you are willing to use jQuery then it's relatively simple:

$('<div>').append( $(ElementSelector).clone() ).html();

This will get the outer HTML of multiple elements if multiple elements are selected.

Solution 5

outerHTML is now supported by Firefox:

From Firefox 11 for developers

Firefox 11 shipped on March 13, 2012. This article provides information about the new features and key bugs fixed in this release, as well as links to more detailed documentation for both web developers and add-on developers.

• The element.outerHTML property is now supported on HTML elements.

View more solutions

Comments

[NibblyPig]

I remember trying getattribute but I couldn't work out how to get the text out of it... if it's possible it's much neater than outerhtml

[NibblyPig]

Tried your function but it just came back with temp = "<LI undefined="undefined" undefined="undefined" undefined="undefined" undefined="undefined" undefined="undefined" undefined="undefined" undefined="undefined" undefined="undefined"... etc.

[NibblyPig]

The problem with that page is that it falls into a discussion with people saying the original example is wrong, so I am quite confused by it.

[Mark Bell]

Actually the guy who says it's wrong later says it does work - have you tried it?

[Stan Rogers]

Modify this by adding an if (attr) {...} and the undefined attributes will not be enumerated in the result.

[Mic]

Pay attention that XMLSerializer generates XML(XHTML) and then do things like <div /> instead of <div></div>. See my answer here.

[Web_Designer]

Thanks, I used your last method!

[Solomon Duskis]

background info for those interested in "getAttribute didn't work": stackoverflow.com/questions/1833973/…

[Solomon Duskis]

Firefox 11 will support outerHTML natively - see bugzilla.mozilla.org/show_bug.cgi?id=92264

[Mic]

@Nickolay wow... a 10 year request finally answered! Thanks for the update

[NibblyPig]

I can't see any specific explanation of why getAttribute is different to getAttributeNode in the link

[yckart]

Golfed down: document.createElement('_').appendChild(node.cloneNode(true)‌​).innerHTML

[Mic]

@yckart, Interesting. But Chrome does not seem to like '_', and you forgot a parentNode to get the outer tag. However something like document.createElement('div').appendChild( n.cloneNode(true) ).parentNode.innerHTML works quite well. Thanks!

[yckart]

@Mic Whoops... I had just an iPhone and my head. No chance to test it before ;)

[Andre Bulatov]

Great answer, thanks! Worked perfectly. Very simple and clean.