JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var todos = [
  {
    title: "倒垃圾"
  },
  {
    title: "繳電話費"
  },
  {
    title: "採買本週食材"
  },
];

function render()
{	
	var root=document.querySelector("#root");
	root.textContent="";
	
	var allist=document.createElement("ul");
	
	for(var x of todos){
		
		var list=document.createElement("li");
		var item=document.createElement("span");
		item.textContent=x.title;
		
		allist.append(list);
		list.append(item);
	}
	console.log(root);
	root.append(allist);
	
}

render();

function add()
{	
	var input=document.querySelector("input");
	todos.push({title:input.value});
	console.log(todos);
	render();
}