JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list"></ul>
<p id="console"></p>

CSS

ul#list {}
ul#list > li {margin:5px; background:#CCC; cursor:pointer;}
ul#list > li:hover {background:#FC0;}

p#console {position:fixed; left:0px; right:0px; bottom:0px; height:200px; overflow:auto; border:1px solid #CCC; padding:3px;}

JavaScript

Element.implement('mooGrab', Element.prototype.grab);
Element.implement('grab', function(el, where){
    cnsl('grab');
    this.mooGrab(el,where);
    return this;
});
Element.implement('mooInject', Element.prototype.inject);
Element.implement('inject', function(el, where){
    cnsl('inject')
    this.mooInject(el, where);
    return this;
});

Element.implement('mooDispose', Element.prototype.dispose);
Element.implement('dispose', function(){
    cnsl('dispose')
    this.mooDispose();
});


$('list').addEvent('click', function(e){
    if(e.target.get('tag') == 'li'){
        e.target[e.target.get('class')]();    
    }
});

function cnsl(txt){
    console.log(txt);
    $('console').set('html', txt+'<br />'+$('console').get('html'));
}

function createLi(appendAction){
    var list, item, removeAction;
    list = $('list');
    removeAction = list.getChildren().length % 2 == 0 ? 'dispose':'destroy';
    item = new Element('li.'+removeAction+'[text="'+removeAction.capitalize()+'"]');
    if(appendAction == 'grab'){
        list.grab(item);
    }else{
        item.inject(list);
    }               
    return item;
}

new Element('button[text="list.empty"]').inject($(document.body),'top').addEvent('click', function(e){$('list').empty();});
new Element('button[text="list.grab"]').inject($(document.body),'top').addEvent('click', function(e){createLi('grab');});
new Element('button[text="item.inject"]').inject($(document.body),'top').addEvent('click', function(e){createLi('inject');});

createLi('grab');
createLi('inject');