Mootools: How to create new element `span` inside `li` element on mouseove?

Question

The HTML code:

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

How to create new element span inside li element on mouseover?

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

This will do a check for an existing SPAN before inserting it. In addition it does not require JQuery or any other JS framework.

Tested on Firefox, but some browsers might handle the e.target part differently so just bear that in mind.

Answer 2

try with this:

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

if you want to remove the span on mouse out, then add this:

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

be careful as these are very naive implementations and are the bare minimum you need for it to work.