Prototype Pattern - to do list

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
    <div class="page-header">
         <h3>todo using prototype pattern</h3>

    </div>
    <!-- simple form to get user input for the form -->
    <div class="row">
        <div role="form" class="col-lg-4 col-md-4">
            <div class="form-group">
                <input id="title" name="title" type="text" placeholder="Do Laundry.." class="form-control" />
            </div>
            <div class="form-group"> <a id="add" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> add</a>

            </div>
        </div>
    </div>
    <!-- tasks get appended here -->
    <div class="row">
        <ul id="todo"></ul>
    </div>

JavaScript

var app = app || {};
app.ToDoList = function (dom) {
    this.item = '#title';
    this.addBtn = '#add';
    this.element = $(dom);
};
app.ToDoList.prototype.init = function () {
    var $this = this;
    $(this.addBtn).on('click', function (evt) {
        evt.preventDefault();
        $this.add();
    });
};
app.ToDoList.prototype.add = function () {
    var value = $.trim($(this.item).val());
    if (value.length == 0) return;
    
    var task = $('<li/>').text(value);
    this.element.append(task);
    $(this.item).val('');
};

$(function () {
    var list = new app.ToDoList('#todo');
    list.init();
});