how do I extend a javascript object such that in browsers that don't natively have outerHTML, I can define it?

Question

I found this function (though, I forget where):

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
}

but this function works by calling outerHTML(my_element) rather than my_element.outerHTML

I want to be able to extend a javascript DOM element object such that it has the outerHTML element, but still use the native one if it exists. how do I do that?

The main reason why I want to do it this way is because Firefox doesn't natively have an outerHTML method, but I still want to use the native implementations if available, as they have been throughly tested, and I feel I can trust them.

UPDATE: @Raynos suggested that I not do the above for outerHTML, and taht I should do something a like the outerHTML specifications. I found this: How do I do OuterHTML in firefox? and it doesn't do .cloneNode, which can cause errors in FireFox 8.0.1.
So, my solution is this, as per @Raynos:

if (!("outerHTML" in HTMLElement.prototype)) {
    Object.defineProperty(HTMLElement.prototype, "outerHTML", {
        get: getOuterHTML
    });
}


function getOuterHTML(){
    var parent = this.parentNode;
    var el = document.createElement(parent.tagName);
    el.appendChild(this.cloneNode(true));
    var shtml = el.innerHTML;
    return shtml;
}

Raynos · Accepted Answer · 2011-12-12T22:12:38.787

8

You generally do something like :

if (!("outerHTML" in document.body)) {
    Object.defineProperty(Element.prototype, "outerHTML", {
        get: getOuterHTML,
        set: setOuterHTML
    });
}

You then read the outerHTML specification and write getOuterHTML and setOuterHTML functions that implement it.

Note: I aggressively recommend against naively implementing an outerHTML property that's not spec compliant. This is going to cause you problems in maintenance when your "version" works differently from the native version. Especially if you add propietory extensions or extra "features" to your version

Note that Object.defineProperty is undefined in older browsers. You may need to use the shim from es5-shim

edited Dec 12 '11 at 22:12

answered Dec 12 '11 at 19:51

Raynos

166,823
56
351
396

Raynos does it better. Check if the method exists first. ;) – nickytonline Dec 12 '11 at 19:53
@nickyt also defines actual getters and setters, your adding a function which means you have to do `elm.outerHTML();` instead of `elm.outerHTML` – Raynos Dec 12 '11 at 19:53
was just about to comment about that in your implementation. – nickytonline Dec 12 '11 at 19:55
I like this. however, I use cloneNode(true) in my implementation of of outerHTML, and FF says this.cloneNode is not a function o.O any idea why? should I make a new stack overflow question? – NullVoxPopuli Dec 12 '11 at 20:03
@TheLindyHop `this` in `getOuterHTML` and `setOuterHTML` should be the node. The node should have a method `.cloneNode`, which version of firefox are we talking about? – Raynos Dec 12 '11 at 20:11
oh, I just read your note about not following spec for outerHTML. I will look for a different version. – NullVoxPopuli Dec 12 '11 at 20:12
the newest version of FireFox. 8.0.1 – NullVoxPopuli Dec 12 '11 at 20:12
I found another way. I /think/ it's closer to the spec? I'm not entirely sure, I only briefly skimmed the spec, and then continued googling. =D (I updated my question to show my solution) – NullVoxPopuli Dec 12 '11 at 20:18
@TheLindyHop you forgot to define the setter :( – Raynos Dec 12 '11 at 20:27
@Raynos I didn't define a setter, cause I don't need it? =\ – NullVoxPopuli Dec 12 '11 at 20:35

nickytonline · Answer 2 · 2011-12-12T19:51:22.887

1

Add it to the HTMLElement prototype

HTMLElement.prototype.outerHTML =  function() {
      // Your implementation of getting outerHTML
}

edited Dec 12 '11 at 19:51

answered Dec 12 '11 at 19:45

nickytonline

6,855
6
42
76

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

You might want to try extending the Node base object, from which almost all of the DOM extends, read here for a description Element element - MDN or as others responded try the HTMLElement read here also from MDN - HTMLElement

Element.prototype.outerHTML = function(){ console.log('hola'); };
HTMLElement.prototype.outerHTML = function(){ console.log('hola'); };

as Raynos on the comments pointed out here is the Spec article, which is encouraging to use Element.

Edit: Removed Node references

edited May 23 '17 at 12:14

Community

1
1

answered Dec 12 '11 at 20:14

rroche

1,262
1
13
29

The [specification](http://html5.org/specs/dom-parsing.html#outerhtml) actually encourages you to extend `Element`, good catch. however putting `outerHTML` on `Node` is bad. – Raynos Dec 12 '11 at 20:31

how do I extend a javascript object such that in browsers that don't natively have outerHTML, I can define it?

3 Answers3