动态更改innerHTML设置

我需要使用innerHTML 动态更改每个节点上设置的值。

我找到的最接近的解决方案是：

...   
Object.defineProperty(Element.prototype, 'innerHTML', {
    set: function () {
        // get value (ok)
        var value = arguments[0];
        // change it (ok)
        var new_value = my_function(value);
        // set it (problem)
        this.innerHTML = new_value;              // LOOP
    }
}
...

但显然这是一个无限循环。 有没有办法调用原来的innerHTML集合？

我也尝试了代理方式但我无法让它发挥作用。

更多细节：

我正在开发一个实验项目，该项目使用反向代理来生成 CSP 策略并将其添加到网站，因此：

• 网站的所有者会知道这些“覆盖"
• 我需要处理客户端生成的任何可能触发的js代码 政策
• 我需要在内容安全策略引擎评估之前修改它！ （这是主要问题，需要这个“不太好“ 解决方案）

强制性警告：重写任何属性的 setter 和 getterElement.prototype在任何生产级代码中都肯定是个坏主意。如果您使用任何依赖于innerHTML正常工作或者如果项目中有其他开发人员不知道这些更改，事情可能会变得很奇怪。您还将失去使用的能力innerHTML在应用程序的其他部分“正常”。

也就是说，由于您没有提供任何信息why如果您想要这样做，我只是假设您了解这些注意事项，并且您仍然想覆盖浏览器自己的功能，也许是出于开发目的。

解决方案：您正在覆盖浏览器的本机设置器Element.prototype.innerHTML，但你还需要原来的二传手来实现你的目标。这可以使用以下方法完成Object.getOwnPropertyDescriptor，这有点像Object.defineProperty.

(function() {
  
  //Store the original "hidden" getter and setter functions from Element.prototype
  //using Object.getOwnPropertyDescriptor
  var originalSet = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML').set;
  
  Object.defineProperty(Element.prototype, 'innerHTML', {
    set: function (value) {
        // change it (ok)
        var new_value = my_function(value);
        
        //Call the original setter
        return originalSet.call(this, new_value);
    }
  });
                        
  function my_function(value) {
    //Do whatever you want here
    return value + ' World!';
  }
                        
})();


//Test
document.getElementById('test').innerHTML = 'Hello';

<div id="test"></div>