Posted By

localhorst on 03/17/08


DOM outerHTML innerHTML

Versions (?)

Who likes this?

2 people have marked this snippet as a favorite


outerHTML in Firefox

 / Published in: JavaScript


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.

  1. if (document.body.__defineGetter__) {
  3. if (HTMLElement) {
  5. var element = HTMLElement.prototype;
  7. if (element.__defineGetter__) {
  9. element.__defineGetter__("outerHTML",
  11. function () {
  13. var parent = this.parentNode;
  15. var el = document.createElement(parent.tagName);
  17. el.appendChild(this);
  19. var shtml = el.innerHTML;
  21. parent.appendChild(this);
  23. return shtml;
  25. }
  27. );
  29. }
  31. }
  33. }

Report this snippet  


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);


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) {
        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];
                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__) {
          function (html) {  
                 var el = document.createElement('div');
                 el.innerHTML = html;
                 var range = document.createRange();
                 var documentFragment = range.extractContents();
                 this.parentNode.insertBefore(documentFragment, this);

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

Posted By: alonbalon on July 17, 2010

This should improve a bit the first entry in this post ...

function XDBGetOuterHTML(Elem){ var parent = Elem.parentNode; var nextSibling = Elem.nextSibling; var el = document.createElement(parent.tagName);
var shtml = el.innerHTML;
parent.insertBefore(Elem , nextSibling);
return shtml; }

Posted By: Yansky on July 31, 2010

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


You need to login to post a comment.