SOURCE

$(function(){
    $('#button-add').on('click',function(){
    var item= $('#text.item').val();
    var li='<li>'+item+'</li>';
    var ul=$('#ul-jhon');
    ul.append(li);
});
});

<ul id="ul-jhon">
    <li style="color:white;font-weight:bold">鸡蛋</li>
    <li style="color:white;font-weight:bold">牛奶</li>
    <li style="color:white;font-weight:bold">电池</li>
</ul>

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

#button-add{
    font-weight:bold
}
ul{
    background-color: black
}