title: `document.body.appendChild(elem);` appends to the end of the html body. How to place in specific place in the body?
body: <p><a href="http://jsfiddle.net/r37yY/1/" rel="nofollow">The following code</a> creates a text input field AFTER the <code>Hey girls!</code> paragraph when pressing on the <code>push</code> button:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function func()
  {
  var elem=document.createElement("input");
  document.body.appendChild(elem);
  elem.setAttribute('type','text');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;Hey guys!&lt;p&gt;
  &lt;input type="button" value="push" onclick="func()"/&gt;
  &lt;script&gt;
  func();
  &lt;/script&gt;
  &lt;p&gt;Hey girls!&lt;p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I make sure the text input fields are created before the <code>Hey girls!</code> paragraph and after the <code>Hey guys!</code> paragraph?</p>