title: Creating a backup array with DOM objects
body: <p>I've got <code>&lt;select&gt;</code> element <strong>a</strong> with different <code>option</code>s. When loading the page, I want to store these <code>option</code>s as a backup (I'm doing this with <code>window.onload</code>).</p>
  
  <p>Now the user changes <code>&lt;select&gt;</code> element <strong>b</strong>, which removes some <code>option</code>s in <code>&lt;select&gt;</code> element <strong>a</strong>. After some other change on <code>&lt;select&gt;</code> element <strong>b</strong>, I want to restore the <code>option</code>s of element <strong>a</strong> with my backup from the startup.</p>
  
  <p>But no matter what, the changes on the <code>option</code>s seem to apply to both arrays.</p>
  
  <p>I've created the backup arrray with <code>new Array</code> and <code>push</code>ed each of the <code>option</code>s into the new array. I hoped that this would prevent them from being removed from the array when they're removed from the DOM.</p>
  
  <p>Any hints how I can solve this problem?</p>
  
  <hr>
  
  <pre><code>function cacheOptions() {
      backupOptions = newArray(document.getElementById("selectElement").options);
  }
  
  function newArray(oldArray) {
      var newArray = new Array(oldArray.length);
      for ( var object in oldArray) {
          newArray.push(object);
      }
      return newArray;
  }
  </code></pre>
  
  <p>And removing the <code>option</code>s in an <code>onchange</code> method …</p>
  
  <pre><code>document.getElementById("selectElement").options[i].remove();
  </code></pre>