innerHTMLに比べると、outerHTMLを使う頻度はぐっと少ない。現状、IEと Safari, Chrome, Operaが対応していて、未対応はFirefoxだけ。使用頻度が低いメソッドに対して、Firefox向けに、長々しいスクリプトを書くのもどうかねぇ、と思ってググってみたところ、ナイスな投稿がありました 。

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

　確かに、これは理にかなってますね。outerHTML自体は、値の取得だけでなくて、設定も出来るんだけど、そういう場面はまずないだろうから、このgetterだけで十分ですね。

<div id="Here">Hello, <strong>really strange</strong> World !</div>

対して、innerHTMLなら

Hello, <strong>really strange</strong> World !

が返されるし、outerHTMLなら、

<div id="Here">Hello, <strong>really strange</strong> World !</div>

が返される。実装例としては、

function getOuterHTML(e) {
 if(e.outerHTML){ // IE, Webkit, Opera
  return e.outerHTML;
 } else { // Firefox (, Webkit, Opera)
  return  new XMLSerializer().serializeToString(e);
 }
};

あるいは、短く

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

とか。

　実際には、Firefoxだと xmlns="http://www.w3.org/1999/xhtml" という属性が付加されるので、気になるようなら適宜省けば良いでしょう。

JavaScript