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.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(); 
}); 

要小心，因为这些都是非常幼稚的执行方式，最低限度你需要它来工作。

Answer 2

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部分不同，所以请牢记这一点。