Access to properties hidden by __defineGetter __ / __ defineSetter__ in JavaScript

Question

I am trying to define a custom setter for a property innerHTML. Unfortunately, I cannot access the underlying property after defining the setter function:

$('body')[0].__defineSetter__("innerHTML",
  function (val) {
    alert("Setting to: " + val);
    this.innerHTML = val;
});

This snippet populates the call stack because the destination calls the setter relay. Obviously, it is innerHTMLalready overloaded in IE8, and you can just save the high get / set pair and use it inside the new property descriptor. Taken from MSDN:

var innerHTMLdescriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
Object.defineProperty(Element.prototype, 'innerHTML',
  { set: function(htmlVal) {
      var safeHTML = toStaticHTML(htmlVal);
      innerHTMLdescriptor.set.call(this, safeHTML);
    }
});

However, this is not the case for Chrome, where it getOwnPropertyDescriptorreturns undefined for innerHTML. In this case, how do I access the underlying property?

: , , , innerHTML? DOM? , , . , DOM __defineGetter__/defineProperty, , , , - .

Answer 1

, , , , . , .

var _innerHTML = "";

this.__defineSetter__( "innerHTML",
    function (val) {
        alert("Setting to: " + val);
        _innerHTML = val;
    } );

this.__defineGetter__( "innerHTML",
    function () {
        return _innerHTML;
    } );

, DOM - . , value input. , innerHTML .