MooShell

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

var list = $('list'), addLink = $('add-link');

list.addEvents({
   'mouseover:relay(a)': function(e){
      e.stop();
      this.highlight('#E79D35');
   }
});

addLink.addEvents({
   'click': function(e){
      e.stop();

      list.adopt(
         new Element('li').adopt(
            new Element('a', {
               'text': 'Lorem ipsum',
               'href': '#'
            })
         )
      );
   }
});

<ul id="action-bar">
    <li><a id="add-link" href="#">Add link</a></li>
</ul>


<ul id="list">
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Lorem ipsum</a></li>
</ul>​