新元素被创建为 [object HTMLLIElement] - 为什么？

Question

When new elements are created on the page, they are showing up as [object HTMLLIElement] instead being created as an li element, like I want it to.

Codepen link here so you can see what I am talking about https://codepen.io/jester070993/pen/bLOrQr

var h1 = document.querySelector("h1")
var lis = document.querySelectorAll("li")
var trashes = document.querySelectorAll("span")
var filterInput = document.querySelector("input")
var container = document.querySelector("#container")
var ul = document.querySelector("ul")
var i = document.querySelectorAll("i")

function goToTrash(event){
  var thisElement = event.currentTarget;
  thisElement.parentElement.remove()
}

function handleClick(event){
  var thisElement = event.currentTarget;
  thisElement.classList.toggle("completed")
}

//forEach loop
lis.forEach(function(li){
    li.addEventListener("click", handleClick)
    trashes.forEach(function(trash){
        trash.addEventListener("click", goToTrash)
    });
});

filterInput.addEventListener("keypress", function(event){
  if(event.which === 13){
      var todo = filterInput.value;
      var newLi = document.createElement("li");
      var element = newLi.appendChild(document.createTextNode(todo));
      ul.appendChild(newLi);
      filterInput.value = " ";
      newLi.addEventListener("click", handleClick);
      newLi.innerHTML =  "<i class='far fa-trash-alt'></i>" + newLi; //This is the line that is creating a new element (li) except it is showing up as  [object HTMLLIElement]
      trashes.forEach(function(span){
        span.addEventListener("click", goToTrash);
      })
  }
});

What am I doing wrong? Would I have to use .current or .currentTarget? Tried both of those and then it just returns "undefined" instead of [object HTMLLIElement]

Answer 1

Here is what I have tried. Maybe you can do it too. You can't just use '+' operator to add an HTMLObject (that is what you newLi is!). you have to use DOM API API to manupulate DOM.

var iconSpan = document.createElement("span")
var icon = document.createElement("i");
icon.classList.add("far");
icon.classList.add("fa-trash-alt");
iconSpan.append(icon);
newLi.prepend(iconSpan);

 var h1 = document.querySelector("h1") var lis = document.querySelectorAll("li") var trashes = document.querySelectorAll("span") var filterInput = document.querySelector("input") var container = document.querySelector("#container") var ul = document.querySelector("ul") var i = document.querySelectorAll("i") function goToTrash(event){ var thisElement = event.currentTarget; thisElement.parentElement.remove() } function handleClick(event){ var thisElement = event.currentTarget; thisElement.classList.toggle("completed") } //forEach loop lis.forEach(function(li){ li.addEventListener("click", handleClick) trashes.forEach(function(trash){ trash.addEventListener("click", goToTrash) }); }); filterInput.addEventListener("keypress", function(event){ if(event.which === 13){ var todo = filterInput.value; var newLi = document.createElement("li"); var element = newLi.appendChild(document.createTextNode(todo)); ul.appendChild(newLi); filterInput.value = " "; var iconSpan = document.createElement("span") var icon = document.createElement("i"); icon.classList.add("far"); icon.classList.add("fa-trash-alt"); iconSpan.append(icon); newLi.addEventListener("click", handleClick); newLi.prepend(iconSpan); trashes.forEach(function(span){ span.addEventListener("click", goToTrash); }) } });

 #container { text-align:center; margin: 0 auto; width: 360px; margin-top: 50px; background:#f7f7f7; box-shadow: 2px 2px 3px magenta; } .completed { text-decoration: line-through; opacity: .4; } body { background: linear-gradient(to right, yellow , orange); } li span { visibility: hidden ; width: 0; } span { margin-right: 15px; height: 40px; margin-left: 10px; color:coral; text-align: center; width: 400px visibility: hidden; } li:hover span{ visibility: visible ; width: 40px; transition-timing-function: linear; } #plus{ float: right; } a{ color:white; } h1{ background: steelblue; color: white; margin: 0; padding: 10px 20px; text-transform: uppercase; font-size: 30px; font-weight: normal; } input { width: 100%; font-size: 18px; background: #f7f7f7; padding: 12px 12px 12px 16px; box-sizing: border-box; color: steelblue; } input:focus { background:white; border: 2px solid steelblue; outline: none; } ul{ list-style: none; margin: 0; padding: 0; text-align:left; font-size: 16px; } body{ font-family: 'Krona One', sans-serif; } li { background: white; height: 34px; line-height: 34px; color: 664; } li:nth-child(2n){ background: #f7f7f7; }

 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="practice.css"> <link href="https://fonts.googleapis.com/css?family=Krona+One" rel="stylesheet"> <script type="text/javascript" src="jquery/jquery-3.3.1.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script> </head> <body> <div id="container"> <h1> To-do List <a href="#"><i class="fas fa-plus-circle" id="plus"></i></a> </h1> <input type="text" placeholder="Add New Todo"> <ul> <li><span><i class="far fa-trash-alt"></i> </span> Walk dog </li> <li><span><i class="far fa-trash-alt"></i> </span> Buy white undershirts </li> <li><span><i class="far fa-trash-alt"></i> </span> Study JS </li> <li><span><i class="far fa-trash-alt"></i> </span> Wake up early</li> </ul> </div> </body> </html>

Answer 2

Probably this is just a typo. If you mean you want to display the text inputted beside the icon.

From:

  var todo = filterInput.value;
  var newLi = document.createElement("li");
  var element = newLi.appendChild(document.createTextNode(todo));
  ul.appendChild(newLi);
  filterInput.value = " ";
  newLi.addEventListener("click", handleClick);
  newLi.innerHTML =  "<i class='far fa-trash-alt'></i>" + newLi; //This is the line that is creating a new element (li) except it is showing up as  [object HTMLLIElement]
  trashes.forEach(function(span){
    span.addEventListener("click", goToTrash);
  })

To:

  var todo = filterInput.value;
  var newLi = document.createElement("li");
  ul.appendChild(newLi);
  filterInput.value = " ";
  newLi.addEventListener("click", handleClick);
  newLi.innerHTML =  "<i class='far fa-trash-alt'></i>" + todo;
  trashes.forEach(function(span){
     span.addEventListener("click", goToTrash);
  })