Adding a string item to an appendChild li element

Hey there,

here’s my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Todo-List</title>
  </head>
  <body>
    <div id="container">
      <header>
        <h2>To-Do List</h2>
      </header>
      <input id="textArea" type="text" placeholder="Enter list item here!"><input id="submit" type="submit" value="Add">
    </div>
    <div id="tasks-div">
      <ul id="tasks-list"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>
let textArea = document.getElementById("textArea");
let submit = document.getElementById("submit");
let ul = document.querySelector("ul");
let deleteIcon = document.createTextNode(" X ");

//add todos
let addTodos = submit.addEventListener("click", function() {
  let value = textArea.value;
  let li = document.createElement("li");
  li.textContent = value;
  let listItem = ul.appendChild(li);
  for (var i = 0; i < listItem.length;i++){
    li += " X ";
  }
  textArea.value = "";
});

I thought by using the += operator, it would add that X to any li element. How would I go about this to ensure that when an li element is created, it has a " X " at the end of it?

You can either use vanilla js li.append("X"); or jquery li.innerHTML="X";.

In the for loop? It did not work.

  1. Create li in for loop.
  2. Add "X" by previously stated.
  3. Add such li to ul.
  4. Reset textarea value.