title: javascript elem.childNodes telling the future?
body: <p>so, I am looping through elem.childNodes and modifying the child nodes. And, I get the following behavior. Why?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div&gt;
     &lt;p&gt;
     &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what I expect to happen:</p>
  
  <pre><code>1. elem = div
  2. console.log(elem.childNodes) = [p]    (this is what I expect console.log to output)
  3. elem.html("&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;");
  </code></pre>
  
  <p>What actually happens:</p>
  
  <pre><code>1. elem = div
  2. console.log(elem.childNodes) = [p, p] (yes, console.log outputs 2 p elements before I even run elem.html)
  3. elem.html("&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;");
  </code></pre>
  
  <p>Note:</p>
  
  <pre><code>if I don't run elem.html("&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;"); after console.log(elem.childNodes), console.log(elem.childNodes) outputs [p] 
  </code></pre>