添加新元素后附加元素消失，点击 addEventListener答案

【问题标题】：Appended element disappear after I add a new one, with addEventListener click添加新元素后附加元素消失，点击 addEventListener
【发布时间】：2019-08-11 23:00:04
【问题描述】：

当我使用 addEventListener 单击列表项时，我尝试在列表元素之后添加一个新的 span 元素。我设法添加了一个类，它工作正常。但是当我将 span 元素附加到一个新的列表项时，它会消失并且只附加到最新的列表元素。

HTML

<ul>
  <li class="blue">One</li>
  <li class="blue">Two</li>
  <li class="blue">Three</li>
  <li class="blue">Four</li>
  <li class="blue">Five</li>
</ul>

CSS

.blue{
  color: blue;
}
.green{
  color: green;
}

JavaScript

const lis = document.querySelectorAll(".blue");
const span = document.createElement('span');
span.className = 'views';
span.textContent = 0;

lis.forEach(function(list){

  list.addEventListener("click", addGreen);
  function addGreen(e){
    if(list.className.indexOf('green') == -1){
      list.className += ' green';
      list.appendChild(span);
      console.log(e.target); 
    }    
  }     
})

jsfiddle demo

【问题讨论】：

您只创建了 1 个跨度元素，当您附加现有元素时，它只会移动它。您需要创建另一个实例。
哦，谢谢，所以我必须在 forEach 循环中创建 span 元素。

标签： javascript foreach addeventlistener appendchild

【解决方案1】：

您只创建了 1 个 span 元素。当您附加现有元素时，它只会移动它；您需要创建另一个实例。

（@Keith 在 cmets 中回答）

【讨论】：