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

Question

当在页面上创建新元素时，它们显示为 [object HTMLLIElement]，而不是像我希望的那样创建为 li 元素。

Codepen 链接在这里，这样你就可以看到我在说什么 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);
      })
  }
});

我做错了什么？我必须使用 .current 或 .currentTarget 吗？尝试了这两种方法，然后它只返回“未定义”而不是 [object HTMLLIElement]

Answer 1

这是我尝试过的。也许你也能做到。您不能只使用“+”运算符来添加 HTMLObject(这就是您的 newLi!)。你必须使用 DOM API API 来操作 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>