JSFiddle - React, Tailwind, and code Playground

by roark

HTML

<ul id="list">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul><br/><br/>
<a href="#" id="addRow">add a row</a>

JavaScript

$('list').addEvent('click', function(event) {
    if(event.target.get('tag') == 'a') {
        event.stop();
        // do something with event.target
        console.log(event.target.innerHTML);
    }
});


$('addRow').addEvent('click', function() {
    var a = new Element('a', {href: '#'});
    a.appendText('link ' + String($('list').getChildren().length + 1));
    var li = new Element('li');
    li.grab(a);
    $('list').grab(li);
});