javascript 节点的问题

<HTML>
 <HEAD>
  <script>
    function reverse(e)
{    
         var f = document.createDocumentFragment();
         while(e.lastChild) f.appendChild(e.lastChild);
 e.appendChild(f);
}
   window.onload = function()
   {
      var e = document.getElementById('press');
  var press = document.getElementsByTagName("input")[0];
  press.onclick = function()
  {
   reverse(e);
  };
   };
  </script>
 </HEAD> <BODY>
   <p id = "press" >
          <h1>one</h1>
 <h2>two</h2>
 <h3>three</h3>
   </p>
   <input type="button" value="press" />
 </BODY>
</HTML>------------------------------------------------------------------------------------为什么 我把  <h1>one</h1>
    <h2>two</h2>
   <h3>three</h3>
换成<li>one</li>
    <li>two</li>
    <li>three</li>
就能运行，难道<h1>不能作为<p>的子节点？