SOURCE

$(function () {
    $('#button-add').on('click', function () {
        var input = $('#text-item').val();
        if (input.trim() == '') {
            alert('不能添加空项目');
        }
        else {
            var $li = $('<li>').text(input);
            $('#ol-shopping').append($li);
        }

    });
});

<ol id="ol-shopping">
    <li>鸡蛋</li>
    <li>牛奶</li>
    <li>电池</li>
    <li>纸巾</li>
</ol>

<input id="text-item" type='text' placeholder="请输入新的列表项目"/>
<button id="button-add">添加</button>

ol {
    background-color: black;
    color:white
}

button{
    font-weight: bold
}