添加新元素后附加元素消失，单击 addEventListener

Question

当我使用 addEventListener 单击列表项时，我尝试在列表元素之后添加一个新的 span 元素。我设法添加了一个 class，它工作正常。但是，当我将 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

Answer 1

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

（@Keith 在评论中回答）

添加新元素后附加元素消失，单击 addEventListener

Appended element disappear after I add a new one, with addEventListener click

javascript

foreach

appendchild

addeventlistener