Как добавить значок li в ul в Javascript?

Question

Я пытаюсь создать приложение списка дел с помощью Javascript. Но у меня есть вопрос о создании нового элемента.

   function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  document.getElementById("list").appendChild(newItem)
}

Это мой код JavaScript. Это работает, я могу создать li из входного значения. Но я хочу включить значок удаления всех элементов li. как это:

<ul id="list">
  <li>New item <i class="fa fa-trash-o de"></i> </li>
</ul>

Спасибо.

Answer 1

Поскольку ваш вопросительный знак касается не css, а javascript, я догадался, что вам нужно знать способ удаления:

function deleteItem(event) {
  var el = event.target
  el.parentNode.removeChild(el)
}

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.addEventListener('click', deleteItem, null)
  newItem.appendChild(text)
  document.getElementById("list").appendChild(newItem)
}

document.getElementById("go").addEventListener('click', todoList, null)

<input type="text" id="todoInput">
<button id="go">add todo</button>
<ul id="list">

</ul>

Идея в основном заключается в добавлении соответствующего слушателя событий к каждому новому элементу.И когда вызывается этот слушатель, он удаляет связанный элемент.

Вот более полная jsfiddle, включая идею стилей.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: существует множество решений для реализацииСписок дел, мой, возможно, не самый лучший, и вы могли бы найти другой способ.

Answer 2

Попробуйте это:

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  // Create icon element to append to DOM
  var icon = document.createElement("i");
  icon.classList.add('fa', 'fa-trash-o', 'de');
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  newItem.appendChild(icon)
  document.getElementById("list").appendChild(newItem)
}