JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<button onclick="add()">新增事項</button>
<div id="root">

</div>

CSS

ul{
  list-style: none;
}

JavaScript

const root=document.querySelector("#root");
let todos = [
  {
    title: "倒垃圾"
  },
  {
    title: "繳電話費"
  },
  {
    title: "採買本週食材"
  },
];

function render(){
  root.innerHTML="";
  let ul=document.createElement("ul");
  root.append(ul);
  for(let todo of todos){
    let li=document.createElement("li");
    let span=document.createElement("span");
    ul.append(li);
    li.append(span);
    span.textContent=todo.title;
  }

}
function add(){
  let event=document.querySelector("[type=text]");
  let newTodo={title: event.value};
  todos.push(newTodo);
  render();
  event.value="";
}

render();