jQuery element creation

by ramyaaviji

HTML

<ol>
    <li>foo</li>
    <li>foo</li>
</ol>
<button class="foo">Foo</button>
<button class="bar">Bar</button>
<button class="baz">Baz</button>

JavaScript

var $list = $("ol");

$('button').click(function () {

    var $item;
    var cls = $(this).attr('class');
    var frag = '<li class="' + cls + '">' + cls + '</li>';

    switch (cls) {
            
        case 'foo':
            $list.append(frag);
            break;
            
        case 'bar':
            $(frag).appendTo($list);
            break;
            
        case 'baz':
            $item = $('<li/>', {
                html: cls,
                cls: cls
            });
            $list.find('li.bar:first').after($item);
            break;
            
    }

});