javascript - Mootools:如何在鼠标悬停时在 `span` 元素内创建新元素 `li`？

Question

HTML 代码:

<ul id="el">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

如何在鼠标悬停时在 li 元素内创建新元素 span？

<ul id="el">
   <li></li>
   <li></li>
   <li><span></span></li><!--on mouseover > new element span-->
   <li></li>
</ul>

Answer 1

document.getElementById('el').addEventListener("mouseover", function(e){
  var e=e.target;
  if (e.nodeName=="LI") {
    var span=e.getElementsByTagName('span')[0];
    if(!span) {
      e.innerHTML="<span></span>";
    }
  }
},false);

这将在插入之前检查现有的 SPAN。此外，它不需要 JQuery 或任何其他 JS 框架。

在 Firefox 上进行了测试，但某些浏览器可能以不同方式处理 e.target 部分，因此请记住这一点。