Mootools：如何在 mouseove 上的“li”元素内创建新元素“span”？

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 部分，因此请记住这一点。

Answer 2

尝试这样做：

document.getElements('#el > li').addEvent('mouseenter', function(e) {
  var target = document.id(e.target);
  if (!target.getElement('span')) target.adopt(new Element('span'));
});

如果您想删除鼠标移出时的跨度，请添加以下内容：

document.getElements('#el > li').addEvent('mouseleave', function(e) {
  document.id(e.target).getElements('span').destroy();
});

要小心，因为这些实现非常幼稚，并且是它工作所需的最低限度。