JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列六：第1課 ── 認識 data model 與 render function</h1>
<div id="root">
</div>

CSS

* {
  padding: 0;
  margin: 0;
  /* 因為作業要求的結構沒有::marker，所以用CSS除掉。::marker是ul裡面的li的前綴黑點 */
  list-style-type: none;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  margin: 20px;
}

JavaScript

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

function render() {
  // 請寫出此函式內容
  let root = document.querySelector("#root");
  root.textContent = "";

  let ul = document.createElement("ul");

  for (let todo of todos) {
    let titleBox = document.createElement("li");
    let title = document.createElement("span");

    title.textContent = todo.title;
    titleBox.append(title);
    ul.append(titleBox);
  }
  root.append(ul);
}

render();