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

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.