advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

localhorst on 03/17/08


Tagged

DOM outerHTML innerHTML


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

rafael


outerHTML in Firefox

Published in: JavaScript 

URL: http://www.mohundro.com/blog/CommentView,guid,469f80ae-968d-4d60-ab5b-62a06bf045c5.aspx

This is a little trick I came up with to add outerHTML functionality in Firefox. For those who aren't familiar with outerHTML, it is an IE addition to the DOM that will return the element's HTML PLUS it's innerHTML. Is it really needed? No, but it can help with debugging sometimes.

Plain TextExpand 
  1. if (document.body.__defineGetter__) {
  2.  
  3.        if (HTMLElement) {
  4.  
  5.               var element = HTMLElement.prototype;
  6.  
  7.               if (element.__defineGetter__) {
  8.  
  9.                      element.__defineGetter__("outerHTML",
  10.  
  11.                            function () {
  12.  
  13.                                   var parent = this.parentNode;
  14.  
  15.                                   var el = document.createElement(parent.tagName);
  16.  
  17.                                   el.appendChild(this);
  18.  
  19.                                   var shtml = el.innerHTML;
  20.  
  21.                                   parent.appendChild(this);
  22.  
  23.                                   return shtml;
  24.  
  25.                            }
  26.  
  27.                      );
  28.  
  29.               }
  30.  
  31.        }
  32.  
  33. }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: ewart on June 3, 2008

This is absolutely needed! and brilliant!

<span id="xx"></span>
<span id="try" mycolor="blue">try to move the mouse over me.</span><br />
<span id="no" mycolor="red">no, move the mouse over me!</span>

And your sample almost works too, but for some reason what is actually returned in my FF browser is: try to move the mouse over me.

note the extra style="" added.

I'm using it in a function:

function getOuter(ele) { var parent = ele.parentNode; var el = document.createElement(parent.tagName); el.appendChild(ele); var shtml = el.innerHTML; parent.appendChild(ele); return shtml; }

have tried cloneNode and importNode but they don't seem to solve - any ideas? el.appendChild(ele.cloneNode(true)); var nn = document.importNode(ele, true);

cheers

Posted By: ewart on June 3, 2008

second attempt at posting the extra style:

try to move the mouse over me.

Posted By: ewart on June 3, 2008

sheesh third attempt, I guess [sometimes] the code has to be escaped..

<span id="try" mycolor="blue">try to move the mouse over me.</span><br />

Posted By: ewart on June 3, 2008

oh dear, never mind i sussed that problem, your sample works fine in my case too -- I had an event adding then removing style elements on the fly hence leaving it with style="" in FF. IE doesn't exhibt the same behaviour so I didn't pick it up immediately. grrr! cheers

You need to login to post a comment.