javascript - javascript 'outerHTML' を正確にネイティブな方法で実装する完璧な方法

Question

次の 2 つの方法のように、outerHTML を使用できることは誰もが知っています。

<h1></h1>
<p>I am superstar.</p>

//first way
var star = document.getElementsByTagName('p')[0];
var h1 = document.getElementsByTagName('h1')[0];
var starOuterHTML = star.outerHTML;
alert(starOuterHTML);//this output: '<p>I am superstar.</p>'

//second way
var star = document.getElementsByTagName('p')[0];
var h1 = document.getElementsByTagName('h1')[0];
star.outerHTML = '<h1>I am superstar.<h1>';////these two above sentences are both h1 element now,that's we have two h1 element

しかし、一部のブラウザはそれを実装していないため、自分で実装することにしました。これらはすべて自分で行ったことです:

if(!Element.outerHTML){
      Object.defineProperty(Element.prototype,'outerHTML',{
          value: function(){
              var wrapper = document.createElement('div');
              wrapper.appendChild(this.cloneNode(true));
              return wrapper.innerHTML;                    
          },
          writable: true,
          enumerable: false,
          configurable: false
      })  
  } 

ご存知のように、これは最初の方法の実装ですが、実装を単に組み込みの outerhtml の方法のように、後で説明します。

ElementのouterHMTLプロパティの2番目の方法を実装する方法がわかりませんか?

Web と持っている本を検索したところ、サポートされていないブラウザーで次のようにアウター HTML が実装されていることがわかりました。

          (function(){

        if(document.createElement('div').outerHTML) return;

        function outerHTMLGetter(){
          var container = document.createElement('div');
          container.appendChild(this.cloneNode(true));
          return container.innerHTML;  
        }

        function outerHTMLSetter(value){
               var container = document.createElement('div');
               container.innerHTML = value;
               while(container.firstChild){
                this.parentNode.insertBefore();
              }
              this.parentNode.removeChild(this);
        }


        if(Object.defineProperty){
          Object.defineProperty(Element.prototype, 'outerHTML',{
            get: outerHTMLGetter,
            set: outerHTMLSetter,
            enumerable:false,
            configurable: true
          });
        }else{
          Element.prototype.__defineGetter__('outerHTML', outerHMTLGetter);
          Element.prototype.__defineSetter__('outerHTML', outerHMTLSetter);

        }
      }());  

ええ、私が検索した上記のコードを使用して実装できますが、私自身のコードを含めて上記のコードを使用すると、関数を使用しています。ただし、outerHTML は関数ではなく要素オブジェクトのプロパティであり、組み込みの方法で完全に実装する必要があります。これにより、将来、すべてのブラウザーが outHTML プロパティを実装するときに実装コードを削除しても使用できるようになります。コードを一切変更せずに。

組み込みの方法: star.outerHTML 上記のコードの方法 (良くない): star.outerHTML() star.outerHTML(value)

自分で書いたコードを完璧にするアイデアはありますか？ありがとう