JSFiddle - React, Tailwind, and code Playground

HTML

<div id="h-contain">
    <ul id="ul1">
      <li>Oranges</li>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
</div>

<p><strong>Click the button to add the item in the textbox to the list.</strong></p>

<input type="text" id="txtbox1" />
<button onclick="btnClick()"><strong>Click it</strong></button>

CSS

#h-contain {
list-style-type: disc;
 padding: 5px 5px 5px 5em;
 margin-bottom: 25px;
 }

#ul1 {
    font-weight: bold;
}

JavaScript

function btnClick() {
    var i = document.getElementById('txtbox1').value;
    if (i != "") {
        var ul = document.getElementById('ul1');
        var li = document.createElement('li');
        li.innerHTML =  i;
        ul.appendChild(li); 
    }
}