JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input_todos">

<button onclick="add()">新增</button>

<select id="select_urgency">
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="urgent">緊急</option>
</select>

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

<button onclick="export_todos()">匯出</button>

CSS

ul{
    margin: 0;
    padding: 0;
}

li{
    list-style-type: none;
}

JavaScript

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



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_addtodos
  // TDL_addbtn.textContent = 'add';
  // TDL_addbtn.onclick = add;
  // root.append(TDL_addbtn);

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

  for (const index in todos) {

    const TDL_li = document.createElement('li');
    if (todos[index].category == 'normal') {
      TDL_li.style.color = '#00DB00';
    } else if (todos[index].category == 'important') {
      TDL_li.style.color = '#C4C400';
    } else if (todos[index].category == 'urgent') {
      TDL_li.style.color = '#AE0000';
    }

    const TDL_completed_btn = document.createElement('button'); //顯示完成按鈕

    if (todos[index].isCompleted == false) {
      TDL_completed_btn.textContent = '標示為已完成';
    } else if (todos[index].isCompleted == true) {
      TDL_completed_btn.textContent = '標示為未完成';
    }

    TDL_completed_btn.onclick = () => {

      if (todos[index].isCompleted == false) {
        todos[index].title = todos[index].title + '[已完成]';
        todos[index].isCompleted = true;
        TDL_completed_btn.textContent = '標示為未完成';
      } else if (todos[index].isCompleted == true) {
        todos[index].title = todos[index].title.slice(0, todos[index].title.length - 5);
        todos[index].isCompleted = false;
        TDL_completed_btn.textContent = '標示為已完成';
      }

      render();
    }

    const TDL_del_btn = document.createElement('button'); //刪除li按鈕
   ...