JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">
  <!-- 內容 -->
</div>

CSS

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

JavaScript

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



function render() {

  //To-do List -> TDL 參數名稱

  const root = document.querySelector('#root'); //內容顯示區域
  root.textContent = ""; //清空root

  const TDL_input = document.createElement('input'); //input_todos
  TDL_input.setAttribute('id', 'input_todos');
  root.append(TDL_input);

  const TDL_addbtn = document.createElement('button'); //button_addtidos
  TDL_addbtn.textContent = 'add';
  TDL_addbtn.onclick = add;
  root.append(TDL_addbtn);

  const TDL_ul = document.createElement('ul');
  root.append(TDL_ul);

  for (const data of todos) {

    const TDL_li = document.createElement('li');
    TDL_ul.append(TDL_li);

    TDL_li.textContent = data.title;
  }
}



function add() {
  const input_todos = document.querySelector('#input_todos');

  todos.push({
    title: input_todos.value
  });

  render();
}



render();