title: Dynamically add a bootstrap 4 list item on button click
body: <p>I am trying to add a bootstrap list item dynamically on button click. I am not sure how to add the item to the list so that it has the bootstrap classes that would make it styled like the hard coded list items. </p>
  
  <p>Currently, the button is adding test content to the bottom of the list but I would like to have those items styled with the bootstrap classes. I don't have the input working yet as I am just trying to get the button part working first.</p>
  
  <p>Does anyone know a way to do that? </p>
  
  <p>Thank you. </p>
  
  <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>var button = document.getElementById("enter");
  var input = document.getElementById("userinput");
  var ul = document.querySelector("ul");
  
  button.addEventListener("click", function() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode("testing"));
    ul.appendChild(li);
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"&gt;
    &lt;title&gt;Zero To Mastery&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row justify-center"&gt;
        &lt;div class="col-12"&gt;
          &lt;header&gt;
            &lt;h1&gt;Shopping List&lt;/h1&gt;
  
          &lt;/header&gt;
          &lt;div class="input-group mb-3"&gt;
            &lt;input id="userinput" type="text" class="form-control" placeholder="add an item..." aria-label="Add an item" aria-describedby="basic-addon2"&gt;
            &lt;div class="input-group-append"&gt;
              &lt;button class="btn btn-outline-info" id="enter" type="button"&gt;Add&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="col-12"&gt;
          &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item"&gt;Jello&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Spinach&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Rice&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Birthday Cake&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Candles&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
  
    &lt;!-- Scripts --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>