event delegate

by basecss

HTML

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button id="add">add li</button>

CSS

#list {
    list-style: none;
    margin: 10px;
    padding: 10px;
}
#list li {
    height: 40px;
    line-height: 40px;
    margin: 10px;
    text-indent: 10px;
    background: #eee;
    box-sizing: border-box;
    cursor: pointer;
}
#list li.border {
    border: 2px solid #C00;
}

#add {
    padding: 10px 20px;
    border: none;
}

JavaScript

document.querySelector('#list').addEventListener('click', function(event){
    if(event.target.tagName.toLowerCase() === 'li'){
        event.target.classList.toggle('border');
    }
}, false);

document.querySelector('#add').addEventListener('click', function(){
    var list = document.querySelector('#list'),
        listLength = list.querySelectorAll('#list li').length,
        li = document.createElement('li');
    
    li.appendChild(document.createTextNode(listLength + 1));
    
    list.appendChild(li);
}, false);