Создать элемент span в li с Javascript - PullRequest
Новая
       7

Создать элемент span в li с Javascript

0 голосов
/ 05 января 2020

Я работаю над проектом списка дел, и при создании нового li я бы хотел, чтобы он начинался с span, содержащего "X". Я написал код ниже, но вместо span я получаю «[объект HTMLSpanElement]». Кто-нибудь знает, как это исправить? Спасибо! 


var enterItem = document.querySelectorAll("input");
var todoList = document.getElementById("todo-list");

for (var i = 0; i < enterItem.length; i++) {
  enterItem[i].addEventListener("keypress", function(key) {
    if(key.which === 13){

      var newLi = document.createElement("li");
      var span = document.createElement("span");
      var newItem = this.value;

      span.textContent = "X";
      newLi.appendChild(document.createTextNode(span + " " + newItem));
      todoList.appendChild(newLi);
      this.value = "";
    }
  });
}

1 Ответ

1 голос
/ 05 января 2020

Вы пытаетесь добавить элемент html в textNode, чтобы он вызывал toString элемента

Вам нужно 

const todoList = document.getElementById("todo-list");

document.getElementById("inputContainer").addEventListener("keypress", function(e) {
  const tgt = e.target;
  if (tgt.type === "text" && e.which === 13) {
    let newLi = document.createElement("li");
    let span = document.createElement("span");
    span.classList.add("remove");
    let newItem = tgt.value;
    span.textContent = "X";
    newLi.appendChild(span)
    newLi.appendChild(document.createTextNode(" " + newItem));
    todoList.appendChild(newLi);
    tgt.value = "";
  }
});

document.getElementById("todo-list").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) {
    tgt.closest("li").remove();
  }
})  
<div id="inputContainer">
  <input type="text" />
</div>
<ul id="todo-list"></ul>
...