title: Understanding basic DOM chaining
body: <p>I'm getting started with JavaScript and the DOM, trying to purposely stay away from jQuery and the like, at least for a little while. With that in mind, tutorials generally provide an example such as this:</p>
  
  <pre><code>h = document.createElement("h1");
  t = document.createTextNode("Hello.");
  h.appendChild(t);
  document.body.appendChild(h);
  </code></pre>
  
  <p>In an attempt to streamline this and avoid variables, I successfully chained the following:</p>
  
  <pre><code>document.body.appendChild(document.createElement("h1")).appendChild(document.createTextNode("Hello."));
  </code></pre>
  
  <p>While this works, I tried to shorten the following prepend operation:</p>
  
  <pre><code>h = document.createElement("h1");
  t = document.createTextNode("Put this on top.");
  h.appendChild(t);
  document.body.insertBefore(h,document.body.firstChild);
  </code></pre>
  
  <p>with the following:</p>
  
  <pre><code>document.body.insertBefore(document.createElement("h1")).appendChild(document.createTextNode("Put this on top."),document.body.firstChild);
  </code></pre>
  
  <p>But this time it didn't work as desired: the text is placed at the very end of the BODY element, obtaining an append instead of a prepend.</p>
  
  <p>I imagine the successful first case is just a fluke, but I can't see what's wrong with this chaining practice.</p>