title: Todo List Sanitizing Input jQuery
body: <p>I am working on a simple to do app. Everything works, except, if the user inputs an html element into the input, then it gets rendered as html. So, for instance if the input is h1 heading /h1 , I get the word "heading" with default h1 styling.
  I have been googling for 2 hours now, and would really just like to finish this app. 
  this is the code.</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 todoList = [];
  
  $("#add").on("click", function() {
    var todoItem = $("#todoInput").val();
    if (!todoItem.trim()) {
      alert("please enter a to do");
    } else {
      todoList.push(todoItem);
  
      //empty the input field on click
      $("#todoInput").val("");
  
      //add a mark complete button to every array item
      //publish array
      var addedTodo = todoList[todoList.length - 1];
      console.log(addedTodo);
      $(".todoContainer")
        .append(
          '&lt;li class="eachItem"&gt;' +
          '&lt;p class="todoItemStyle"&gt;' + addedTodo +
          '&lt;/p&gt;&lt;button class="sm-btn" id="deleteButton"&gt; delete &lt;/button&gt; &lt;button class="sm-btn"  id="completeButton"&gt; complete &lt;/button&gt;&lt;/li&gt;'
        )
        .addClass("todoStyle");
    }
  });
  
  //add button to complete all items
  $("#completeAll").on("click", function() {
    $(".todoItemStyle").toggleClass("completed");
  });
  
  //add button to restart list
  $("#newList").on("click", function() {
    todoList = [];
    $(".todoContainer").html("");
  });
  
  //button to remove a todo
  $("body").on("click", "#deleteButton", function() {
    $(this).parent().remove();
    console.log("delete button pressed");
  });
  
  //button to complete a todo
  $("body").on("click", "#completeButton", function() {
    $(this).siblings(".todoItemStyle").toggleClass("completed");
    console.log("completed clicked");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="main container"&gt;
    &lt;div class="all container"&gt;
      &lt;h1&gt; My List &lt;/h1&gt;
      &lt;div class="buttons"&gt;
        &lt;button id="newList" class="global-buttons"&gt; New List &lt;/button&gt;
        &lt;button id="completeAll" class="global-buttons"&gt; Complete All&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="container list"&gt;
        &lt;label&gt; Input your to do &lt;/label&gt;
        &lt;input type="text" id="todoInput" placeholder="Input your to do here" name="todo"&gt;
        &lt;button id="add" class="global-buttons"&gt; Add to list &lt;/button&gt;
        &lt;ul class="todoContainer"&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for looking.
  <strong><a href="https://codepen.io/leikina/pen/jYvyVN" rel="nofollow noreferrer">CodePen</a></strong></p>