title: How to append text interactively as a list item to a list in the HTML document without storing the list item as a javascript variable?
body: <p>This is a question about how javascript compiles (I think) and how text gets appended to an HTML document.</p>
  
  <p>I was following an example <a href="http://www.w3schools.com/jsref/met_node_appendchild.asp" rel="nofollow">here</a> because I wanted to append an element to a list in the document interactively.</p>
  
  <p>My html file contains a list:</p>
  
  <p><code>&lt;ul id="sList"&gt;
  &lt;/ul&gt;</code></p>
  
  <p>If I write javascript like this:</p>
  
  <pre><code>var textnode = document.createTextNode(s);
  var node = document.createElement("li");
  node.appendChild(textnode);
  document.getElementById("sList").appendChild(node);
  </code></pre>
  
  <p>Each string (each held in the variable s) gets appended to a list in the document.</p>
  
  <p>I naively thought I could write this in fewer lines.</p>
  
  <pre><code>var node = document.createElement("li");
  node.appendChild(document.createTextNode(s));
  document.getElementById("sList").appendChild(node);
  </code></pre>
  
  <p>works as intended, appending each s to a list as a list item, but each fails to appear as a list item properly if I try to reduce the code further by not storing the created "li" as a variable. For example, this script appends text between tags but not as list items:</p>
  
  <pre><code>var textnode = document.createTextNode(s)
  var node = (document.createElement("li")).appendChild(textnode)
  document.getElementById("sList").appendChild(node)
  </code></pre>
  
  <p>Similarly, my first attempt was this one-liner: </p>
  
  <pre><code>document.getElementById("sList").appendChild(document.createElement("li").appendChild(document.createTextNode(s)))
  </code></pre>
  
  <p>which also appends text within the <code>&lt;ul&gt;</code> tags but not as list items.</p>
  
  <p>So I am just wondering how the compiler interprets an appendChild call of a text node to a document.createElement that hasn't been created yet, and whether it's possible to append items to a list without storing them as variables first. This question is out of curiosity, though I suppose it also would be nice to understand the DOM better and how do more with less javascript.</p>