Mootools：如何在鼠标悬停时在`li`元素内创建新元素`span`？答案

【问题标题】：Mootools: How to create new element `span` inside `li` element on mouseove?Mootools：如何在鼠标悬停时在`li`元素内创建新元素`span`？
【发布时间】：2024-08-27 16:40:02
【问题描述】：

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>

【问题讨论】：

标签： javascript list mootools element mouseover

【解决方案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 部分的方式不同，因此请记住这一点。

【讨论】：

没有。我的例子确实有效。我在 Safari 5.0.1、Firefox 3.6.8 和 Chrome 5.0.375 中对其进行了测试。请参阅此链接以获取带有 HTML 的 Javascript：ifelse.org/projects/*/3417148.html 如果您无法使其正常工作，我将感谢您详细说明您是如何实现它的，以便我进行验证。
很高兴听到这个消息。发布的原始代码不会显示任何视觉变化（您必须使用 Firebug 等才能看到它），因为我使用的是您给我的示例 HTML。那是问题吗？出于好奇，如果它对您“有效”，我会给出“最佳答案”吗？ :)
我要求 Mootools 解决方案而不是通常的 JS。无论如何感谢您的帖子！
不客气。次要观点：当您将其标记为 mootools 时，您直到我发布后才澄清它 MooTools。另外，我不明白为什么当普通 JS 工作时它应该是特定于 mootool 的。用 $ 交换 'document.getElementById' 等并不是什么大不了的事。万事如意

【解决方案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();
});

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

【讨论】：