title: Why is the prototype chain being executed differently?
body: <p>I'm trying to learn more about Javascript and dig a bit into the prototype chain. I wanted to create a small extension for an HTMLElement when I came across this problem.</p>
  
  <p>The way I understand <code>Object.create</code> is that the object that is passed to it is used to create the context for the new object and that the first link in the prototype chain of the newly created object will point to the object passed to the <code>Object.create</code> method. That being the case, the method of extension used in the <code>bar</code> method below seemed to be the correct approach to me as this newly created object would be given its HTMLElement as its context.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;span id="test"&gt;&lt;/span&gt;
  
      &lt;script&gt;
        HTMLElement.prototype.foo = function() {
          let foo = Object.create(null);
          foo.parentElement = this;
          foo.parentElement.appendChild(document.createElement('div'));
        }
  
        HTMLElement.prototype.bar = function() {
          let fooRenderer = Object.create(this);
          fooRenderer.appendChild(document.createElement('div'));
        }
  
        document.getElementById('test').foo();
        document.getElementById('test').bar();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What happens though is that the <code>foo</code> method works correctly by appending a new <code>div</code> child element to <code>&lt;span id="test"&gt;&lt;/span&gt;</code>, but <code>bar</code> does not. </p>
  
  <p>When I open the developer tools in my browser and try to follow the prototype chains of the two objects that are having <code>appendChild</code> invoked on them, they look almost identical:</p>
  
  <pre><code>foo Object
      .parentElement &lt;span#test2&gt;
          .__proto__ HTMLSpanElementPrototype
              .__proto__ HTMLElementPrototype
                  .__proto__ ElementPrototype
                      .__proto__ NodePrototype
                          .appendChild
                          .__proto__ EventTargetPrototype
                              .__proto__ Object
                                  .__proto__
                                      get
                                      set
  
  fooRenderer Object
      .__proto__ &lt;span#test2&gt;
          .__proto__ HTMLSpanElementPrototype
              .__proto__ HTMLElementPrototype
                  .__proto__ ElementPrototype
                      .__proto__ NodePrototype
                          .appendChild
                          .__proto__ EventTargetPrototype
                              .__proto__ Object
                                  .__proto__
                                      get
                                      set
  </code></pre>
  
  <p>I have created a <a href="https://jsfiddle.net/14fngyg1/1/" rel="nofollow">jsFiddle</a> with this example.</p>
  
  <p><strong>Can someone please explain to me why <code>bar</code> isn't working? Is <code>bar</code> in fact the more correct approach? If so, how should it be setup to work properly?</strong></p>
  
  <p>Thanks in advance for any help!!!</p>