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?

Answer 1

Try this: http://snipplr.com/view/5460/outerhtml-in-firefox/:

if (document.body.__defineGetter__) { 
   if (HTMLElement) {
      var element = HTMLElement.prototype;
      if (element.__defineGetter__) {
         element.__defineGetter__("outerHTML",
           function () {
              var parent = this.parentNode;
              var el = document.createElement(parent.tagName);
              el.appendChild(this);
              var shtml = el.innerHTML;
              parent.appendChild(this);
              return shtml;
           }
         );
      }
   }
}

Answer 2

If all you want is the onclick attribute, then try the following: This assumes that you did not set the event using attachEvent or addEventListener.

elm.getAttribute("onclick");

If you want to make an outerHTML string (just promise not to take it apart after you make it):

function outerHTML(elm){
  var ret = "<"+elm.tagName;
  for(var i=0; i<elm.attributes.length; i++){
    var attr = elm.attributes[i];
    ret += " "+attr.name+"=\""+attr.nodeValue.replace(/"/, "\"")+"\"";
  }
  ret += ">";
  ret += elm.innerHTML+"</"+elm.tagName+">";
  return ret;
}

This function should do the trick in most cases, but it does not take namespaces into account.

Answer 3

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

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

Answer 4

Figured it out!

child.getAttributeNode("OnClick").nodeValue;

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

Answer 5

How about something simple like this (not fully tested):

function outerHTML(node) {
    var el;
    if (node.outerHTML) {
        return node.outerHTML;
    } else if (node.parentNode && node.parentNode.nodeType == 1) {
        var el = document.createElement(node.parentNode.nodeName);
        el.appendChild( node.cloneNode(true) );
        return el.innerHTML;
    }
    return "";
}

Answer 6

For the reason that W3C does not include outerHTML property, you just need add following:

if (typeof (HTMLElement) != "undefined" && !window.opera)  
{  
    HTMLElement.prototype._____defineGetter_____("outerHTML", function()  
    {  
        var a = this.attributes, str = "<" + this.tagName, i = 0; for (; i < a.length; i++)  
            if (a[i].specified)  
            str += " " + a[i].name + '="' + a[i].value + '"';  
        if (!this.canHaveChildren)  
            return str + " />";  
        return str + ">" + this.innerHTML + "</" + this.tagName + ">";  
    });  
    HTMLElement.prototype._____defineSetter_____("outerHTML", function(s)  
    {  
        var r = this.ownerDocument.createRange();  
        r.setStartBefore(this);  
        var df = r.createContextualFragment(s);  
        this.parentNode.replaceChild(df, this);  
        return s;  
    });  
    HTMLElement.prototype._____defineGetter_____("canHaveChildren", function()  
    {  
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());   
    });  
} 

Answer 7

Try:

(function(ele, html)
{if (typeof(ele.outerHTML)=='undefined')
    {var r=ele.ownerDocument.createRange();
     r.setStartBefore(ele);
     ele.parentNode.replaceChild(r.createContextualFragment(html), ele);
    }
 else
     {ele.outerHTML=html;
     }
})(aEle, aHtml);

for diyism

Answer 8

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.

Answer 9

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