title: Replacing <h2> tags with <p> tags, every other <h2> is skipped
body: <p>I am working on an assignment and I have ran into some issues. We have to essentially convert an <code>&lt;h2&gt;</code> tag using javascript into a <code>&lt;p&gt;</code> tag while making sure it maintains all of its attributes.</p>
  
  <p>I have come up with the following</p>
  
  <pre><code>var numElements = document.getElementsByTagName("h2").length;
  for (i=0; i&lt;numElements; i++){
      var curr = document.getElementsByTagName("h2")[i];
      var updated = document.createElement("p");
      for (j = 0; j &lt; document.getElementsByTagName("h2")[i].attributes.length; j++){
          updated.setAttribute(curr.attributes.item(j).name, curr.attributes.item(j).value);
      }
      updated.innerHTML = curr.innerHTML;
      curr.parentNode.replaceChild(updated, curr);
  }
  </code></pre>
  
  <p>Now this somewhat works, but I am not sure why I am getting issues with it. The bug that happens is that this only works on every other <code>&lt;h2&gt;</code> tag. So if I have 3 tags within a body, it will only perform this function on first and third tags.</p>
  
  <p>I am not looking for a jQuery answer.</p>