index.html

<form>
  <input name="item">
  <button type="submit">Add Item</button>
</form>
<ul id="todo-items">
</ul>

<script  id="item-template" type="text/x-template">
  <li>
    <span>{{ name }}</span>
    <img src="some-image">
    <button class="remove">remove</button>
  </li>
</script>

<script>
    var parsedUserData = {
        "name" : "John Doe",
        "items" : [
            "Item 1",
            "Item 2"
            "Item 3"
        ]
    }

    // Build the list elements dynamically from data using a template.
    // Caching is important here because appending elements into the DOM is expensive.
    var cache = '';
    parsedUserData.items.forEach(function(item) {
        cache += Mustache.render($("#item-template").html(), { name: item });
    })
    $("todo-items").append(cache);

    // Activate the "remove" buttons.
    $("todo-items").on('click', 'button.remove', function() {
        $(this).parent().remove();
    })

    $('form').submit(function(e) {
        e.preventDefault();
        var content = $('input').val());
        $("todo-items").append($('<li></li>').text(content));
    })
</script>