JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

<input id="keyword" type="text" placeholder="請輸入代辦事項" />
<button onclick="myFunction()">新增</button>

</div>

<div>
  <ul id="todoul">

  </ul>
</div>

JavaScript

function myFunction() {

let todotext = document.getElementById('keyword').value; //取得input事項的值
let ul = document.getElementById('todoul');
let list = document.createElement('li'); 
let span2 = document.createElement('span'); 
span2.textContent = todotext; //剛剛取得的input事項放進去

ul.append(list);
list.append(span2);
}