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部分不同，所以請牢記這一點。