title: store a HTML element in a variable
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;ul id=&quot;myList&quot;&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 append&lt;/p&gt;
  
  &lt;button onclick=&quot;myFunction()&quot;&gt;Try it&lt;/button&gt;
  
  &lt;script&gt;
  function myFunction() {
    let newLi = document.createElement(&quot;LI&quot;);
    let textNode = document.createTextNode(&quot;Water&quot;);
    let water = newLi.appendChild(textNode);
    console.log(water);    // water variable doesn't store the node object that represents the appended node
    document.getElementById(&quot;myList&quot;).appendChild(water);
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I have a question regarding return value of appendChild() method. The definition says the return value of appendChild() is &quot;node object that represents the appended node&quot;. It is not a string data type. So, I just tried to store the return value in a variable (water variable in the code above). But, the variable just stores a string data type. Is that because variable cannot store a HTML element as its value?</p>