title: JavaScript firstChild returns undefined
body: <p>I am just a beginner in DOM manipulation so sorry for a silly question.
  I have te following piece of HTML and JS code</p>
  
  <pre><code>&lt;ul id="myList"&gt;
      &lt;li&gt;Coffee&lt;/li&gt;
      &lt;li&gt;Tea&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;p&gt;Click the button to get the HTML content of the list's first child node.&lt;/p&gt;
  
  &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
  
  &lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Whitespace inside elements is considered as text, and text is considered as nodes.&lt;/p&gt;
  
  &lt;p&gt;If you add whitespace before the first LI element, the result will be "undefined".&lt;/p&gt;
  
  &lt;p id="demo"&gt;&lt;/p&gt;
  &lt;p id="demo2"&gt;&lt;/p&gt;
  
  &lt;script&gt;
      function myFunction() {
          var list = document.getElementById("myList").firstChild.innerHTML;
          document.getElementById("demo").innerHTML = list;
          var x=document.getElementById("myList").childNodes[0];
          document.getElementById("demo2").innerHTML=x.nodeName;      
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The issue here is that the </p>
  
  <pre><code>document.getElementById("demo").innerHTML = list;
  </code></pre>
  
  <p>outputs undefined in the window. However, everything works fine when I use firstElementNode property. Or is it because the first child is Attr corresponding to the ID attribute?
  Thanks in advance. </p>