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?

2 people have marked this snippet as a favorite

rafael
cessnajumpin


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.

Embed | 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

Posted By: tysonmalchow on March 1, 2009

This will enable .outerHTML as a setter in Firefox: (though it will only work if you replace an element with another single element - you can't replace one with many. this code will simply ignore anything but the first element present in the HTML/XML you pass to it.)

if (element.__defineSetter__ && DOMParser) {
    element.__defineSetter__("outerHTML",
        function (v) {
            var e = document.createElement("div");
            var root = null;
            e.innerHTML = v;
            for(var i=0; i<e.childNodes.length; i++) {
                if(e.childNodes[i].nodeType == 1) {
                    root = e.childNodes[i];
                    break;
                }
            }
            if(root)
                this.parentNode.replaceChild(root, this);
        }
    );
}
Posted By: benjamin247 on April 17, 2009

Response to Tyson: As you point out, your defineSetter function will only parse out the first node of the passed code (and alternate attempts to remove the break command and rely on multiple this.parentNode.insertBefore(e.childNodes[i], this); calls results in an irregular every-other-node pattern. I've seen a variety of other approaches on the web that generally fall appart when confronted with self-closing tags (like input,img, etc).

I think I've got a solution that may work in all solutions (at least it's handled every test I've managed to come up with):

          if (element.__defineSetter__) {
      element.__defineSetter__("outerHTML",
          function (html) {  
                 var el = document.createElement('div');
                 el.innerHTML = html;
                 var range = document.createRange();
                 range.selectNodeContents(el);
                 var documentFragment = range.extractContents();
                 this.parentNode.insertBefore(documentFragment, this);
                 this.parentNode.removeChild(this);
          }
        );
    }

Anyway, between the original post and this I think that it should perfectly replicate outerHTML as used by other browsers.

You need to login to post a comment.