JSFiddle - React, Tailwind, and code Playground

by yoyosan

HTML

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

JavaScript

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

let render = () => {
  root.textContent = '';
  for (let item of todos) {
    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);
    let span = document.createElement('span');
    span.textContent = item.title;
    li.append(span);
    root.append(ul);
  }
}


function add(){
  let item = document.querySelector('#item').value;
  todos.push({title:item});
  render();

}


render();