title: How can I make several Elements when extending a DIV-Element?
body: <p>I am trying to "extend" a DIV via Javascript by using a newly created div as prototype of my object.</p>
  
  <p>As I understand Javascript, on creating a new instance of my Object via "new", the prototype-object is copied, assigned to "this" an then the function is executed (as the constructor).</p>
  
  <p>Everything seems to work, except that whenever I create another object, and add it to the DOM, it "replaces" the original div. To be more exact: The constructor always changes the same div.</p>
  
  <p>Using <code>MyTest.prototype = document.createElement("div");</code> gives me the described behavior, the two commented lines after that in my code example are what I also tried, but to no avail.</p>
  
  <p>I know trying to extend the DOM is frowned upon, but I want to understand this behavior, because I thought I knew how prototypes work and this simply does not fit my idea.</p>
  
  <p>Here is a minimal example of what I am trying to do:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Div-Prototype-Test&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  
  var height = 20;
  var top = 0;
  
  function MyTest() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
  
      this.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
      this.style.position        = "absolute";
      this.style.width           = "500px";
      this.style.height          = height + "px";
      this.style.top             = top + "px";
  
      top += height;
  
      document.getElementsByTagName("body")[0].appendChild(this);
  }
  
  MyTest.prototype = document.createElement("div");
  // MyTest.prototype = document.createElement("div").cloneNode(true);
  // MyTest.prototype = new Element();
  
  window.addEventListener(
      "load", 
      function() {
          var a = new MyTest();
          var b = new MyTest();
          var c = new MyTest();
          var d = new MyTest();
      }
  );
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PS: Because of a certain Javascript-Framework my search for anything that changes the prototype in Javascript always resulted in hundreds of results that had nothing to do with my problem - please tell me if I missed a question that already discusses this.</p>
  
  <p>Edit:</p>
  
  <p>To make my question clearer:</p>
  
  <p>Here is an example where I use an object as prototype - its properties get copied. </p>
  
  <pre><code>function A() {
  }
  
  A.prototype = { property: 4 };
  
  A.prototype.set = function(num) {
      this.property = num;
  }
  
  window.addEventListener(
      "load", 
      function() {
          var message = "";
  
          var x1 = new A();
          message += "A1 : "+ x1.property +"\n";
  
          x1.set(15);
          message += "A1 : "+ x1.property +"\n";
  
          var x2 = new A();
          message += "A2 : "+ x2.property +"\n";
  
          alert(message);
      }
  );
  </code></pre>
  
  <p>The alert then said:</p>
  
  <pre><code>A1 : 4
  A1 : 15
  A2 : 4
  </code></pre>
  
  <p>The Div in my first example however does not seem to be copied, it behaves like a Singleton or Monostate. Should it not go like this?</p>
  
  <ol>
  <li>Protype object is copied into a new object </li>
  <li>the new object is assigned to "this" </li>
  <li>this is given to the constructor </li>
  <li>this is returned by the constructor (if no return statement is specified)</li>
  </ol>