title: Appending the contents of a HTMLCollection to Body
body: <p>I am trying to:</p>
  
  <ol>
  <li>Parse a HTML string to a DOM object</li>
  <li>Extract the paragraphs (10 of them in this case)</li>
  <li>Append extracted paragraphs to body</li>
  </ol>
  
  <p>I have the following code:</p>
  
  <pre><code>$(document).ready(function(){
      function _parse(html_str_or_obj)
      {
          var elem_obj, elem_dom_obj;
  
          //Convert to DOM element
          elem_obj = document.createElement("div");
          elem_obj.innerHTML = html_str_or_obj;
          elem_dom_obj = elem_obj.firstChild;
  
          return elem_dom_obj;
      }
  
      var html_str = '&lt;div id="body-wrapper"&gt;\
        &lt;div id="container-1"&gt;\
          &lt;div id="container-1x"&gt;&lt;div id="container-2x"&gt;&lt;div id="container-3x"&gt;&lt;p&gt;First Paragraph&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;\
          &lt;p&gt;This is the first container - Line 1&lt;/p&gt;\
          &lt;p&gt;This is the first container - Line 2&lt;/p&gt;\
          &lt;p&gt;This is the first container - Line 3&lt;/p&gt;\
        &lt;/div&gt;\
        &lt;div id="container-2"&gt;\
          &lt;p&gt;This is the second container - Line 1&lt;/p&gt;\
          &lt;p&gt;This is the second container - Line 2&lt;/p&gt;\
          &lt;p&gt;This is the second container - Line 3&lt;/p&gt;\
          &lt;p&gt;This is the second container - Line 4&lt;/p&gt;\
        &lt;/div&gt;\
          &lt;div id="container-3"&gt;\
          &lt;p&gt;This is the third container - Line 1&lt;/p&gt;\
          &lt;p&gt;This is the third container - Line 2&lt;/p&gt;\
        &lt;/div&gt;\
      &lt;/div&gt;';
      var elem_body_obj = document.body;
      var elem_obj = _parse(html_str);
      var elem_p_obj = elem_obj.getElementsByTagName('p');
  
      for(var i = 0; i &lt; elem_p_obj.length; i++)
      {
          elem_body_obj.appendChild(elem_p_obj[i]);
      }
  });
  </code></pre>
  
  <p>It works up to the point when I append the elements. Instead of 10 paragraphs, it only appends 5. Not sure what is going on.</p>
  
  <p>When I use <code>console.log(elem_p_obj)</code>, it shows me a HTMLCollection with only 5 elements. However, when I comment out <code>elem_body_obj.appendChild(elem_p_obj[i]);</code> from the for loop, it outputs 10 elements as normal. </p>
  
  <p>I want to append all 10 paragraphs, but something seems to be wrong somewhere.</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/o3gutw2e/3/" rel="nofollow">http://jsfiddle.net/o3gutw2e/3/</a>.</p>