title: XPathResult and invalid iterator state
body: <p>I have a relatively large (500-100 rows) HTML table with a bunch of <code>&lt;a&gt;</code> elements.  I would like to add a <code>&lt;select&gt;</code> to the top of the page, and populate it by creating an <code>&lt;option&gt;</code> for each <code>&lt;a&gt;</code> in the table.</p>
  
  <p>My first approach looked something like this:</p>
  
  <pre><code>    var initSelect = function () {
          var select = document.getElementById('mySelect');
          var items = document.evaluate('//a',  document, null, XPathResult.ANY_TYPE, null);
  
          var item = items.iterateNext();
  
          while (item) {
              var elem = document.createElement("option");
              var val = document.createAttribute("value");
              val.value = elem.nodeValue;
              elem.setAttributeNode(val);
              elem.innerHTML = item.innerHTML;
              select.appendChild(elem);
              item = items.iterateNext();
          }  
      };
      window.onload = initSelect;
  </code></pre>
  
  <p>As soon as I tried to <code>appendChild()</code> to the <code>&lt;select&gt;</code> I got an <code>UncaughtInvalidStateError</code>.  I figured that modifying the DOM was invalidating my <code>XPathResult</code> iterator, so I tried to add all of the <code>&lt;option&gt;</code> elements to an array first, and then appending them after iterating through all of the results.</p>
  
  <pre><code>    var initSelect = function () {
          var select = document.getElementById('src_select');
          var items = document.evaluate('//a',  document, null, XPathResult.ANY_TYPE, null);
          var elems = [];
          var item = items.iterateNext();
  
          while (item) {
              var elem = document.createElement("option");
              var val = document.createAttribute("value");
              val.value = elem.nodeValue;
              elem.setAttributeNode(val);
              elem.innerHTML = item.innerHTML; 
              elems.push(elem);
              item = items.iterateNext();
          }  
  
          for (var i = 0; i &lt; elems.length; i++) {
              select.appendChild(elems[i]);
          }
      };
      window.onload = initSelect;
  </code></pre>
  
  <p>If I step through the code in the debugger, I see <code>items.invalidIteratorState</code> go to <code>true</code> after executing the <code>elem.innerHTML = item.innerHTML</code> line.  Then I get the same error on the next call to <code>items.iterateNext()</code>.</p>
  
  <p>The first thing I'd like to get working is to just see the <code>&lt;select&gt;</code> populated.  After that, the goal is to be able to select an element in the drop down, and have the page navigate to the same link that the corresponding <code>&lt;a&gt;</code> element would have taken me to.</p>
  
  <p>This is the first JavaScript I've written, so I appreciate any and all feedback.  At this point, I'm looking for a pure JavaScript solution.  Once I get it working I'm going to try to pull JQuery in and revise it.</p>