Mootools: Comment créer un nouvel élément `span` dans l'élément` li` sur mouseove?

Question

Le code HTML:

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

Comment créer nouvel élément span intérieur de l'élément li sur mouseover?

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

Answer 1

essayer avec ceci:

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

si vous souhaitez supprimer la durée de la souris sur, puis ajouter ceci:

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

attention car ceux-ci sont mises en œuvre très naïves et sont le strict minimum vous en avez besoin pour travailler.

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); 

Cela va faire un chèque pour un SPAN existant avant de l'insérer. En outre, il ne nécessite pas JQuery ou tout autre framework JS.

Testé sur Firefox, mais certains navigateurs pourraient gérer la partie e.target différemment alors gardez cela à l'esprit.