title: appendChild is not a function error javascript
body: <p>Each time I try and submit the text I've inputted, I get an error in my console from my javascript code that says:</p>
  
  <blockquote>
    <p>Uncaught TypeError: textItem.appendChild is not a function at HTMLFormElement.addItem</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const form = document.getElementById('form');
  const itemList = document.getElementById('item');
  
  form.addEventListener('submit', addItem);
  
  function addItem(e){
    e.preventDefault();
    var textItem = document.getElementById('text-item').value;
  
    var li = document.createElement('li');
    li.className = 'item-group';
    li.appendChild(document.createTextNode(textItem));
    textItem.appendChild(li);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    font-family:arial;
    background: #f4f4f4;
  }
  
  #header{
    margin:20px 30px;
    background: #2cc36b;
    border-radius: 3px;
    padding:5px;
    text-align:center;
  }
  
  #header h1{
    background: #26A65B;
    color:#fff;
    font-size:40px;
    padding:5px;
    width:260px;
    margin:20px auto;
    box-shadow: 6px 6px 5px -2px rgba(0,0,0,0.5);
    border-radius: 2px;
  }
  
  #header input[type="text"]{
    width:400px;
    padding:10px;
    margin-bottom:15px;
    font-size: 15px;
    border: none;
    border-radius: 2px;
    background: #f4f4f4;
  }
  
  #main{
    margin:25px 100px 0 100px;
    border:2px solid #D2D7D3;
    border-radius:3px;
    padding:10px;
  }
  
  #main h3{
    margin:10px 10px -2px 30px;
    font-size:30px;
  }
  
  #main input[type="text"]{
    margin:10px 2px 8px 30px;
    padding:12px;
    width:150px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background:#f4f4f4;
    color:#111111;
    padding-right:30px;
  }
  
  #main input[type="submit"]{
    padding:10px;
    background:#BDC3C7;
    font-size:17px;
    border:none;
    border-radius: 5px;
    color:#001f3f;
  }
  
  #main input[type="submit"]:hover{
    cursor: pointer;
  }
  
  #main ul{
    list-style: none;
  }
  
  #main li{
    padding:15px;
    margin:0 25px 10px 0;
    border:1px solid #BDC3C7;
    border-radius:5px;
  }
  
  .delete-btn{
    float:right;
    color:#FF4136;
    font-size:17px;
  }
  
  .delete-btn:hover{
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt; Item Lister &lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrap"&gt;
    &lt;div id="header"&gt;
      &lt;h1&gt; Item Lister &lt;/h1&gt;
      &lt;input type="text" placeholder="Search through your items..." id="filterSearch"/&gt;
    &lt;/div&gt;
      &lt;div id="main"&gt;
        &lt;h3&gt; Add items &lt;/h3&gt;
      &lt;form id="form"&gt;
        &lt;input type="text" placeholder="Add an item..." id="text-item"/&gt;
        &lt;input type="submit" value="Submit" id="submit"/&gt;
      &lt;/form&gt;
        &lt;h3&gt; My items &lt;/h3&gt;
        &lt;ul id="item"&gt;
          &lt;li class="item-group"&gt; Example 1 &lt;span class="delete-btn"&gt;&amp;#x2718;&lt;/span&gt; &lt;/li&gt;
          &lt;li class="item-group"&gt; Example 2 &lt;span class="delete-btn"&gt;&amp;#x2718;&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a link to the codepen - <a href="https://codepen.io/anon/pen/bMdWgJ" rel="nofollow noreferrer">https://codepen.io/anon/pen/bMdWgJ</a></p>
  
  <p>How can I fix this?</p>