CODEWITHSUNDEEP
javascriptlistmootoolselementmouseover
Binyamin
Binyamin

Reputation: 7803

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

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>

Upvotes: 0

Views: 1723

Answers (2)

gonchuki
gonchuki

Reputation: 4124

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.

Upvotes: 1

donohoe
donohoe

Reputation: 14123

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.

Upvotes: 3

Related Questions