JS로 html 갖고놀기

걍 다 가능하구나 html요소를 건들이는건 JS로 껌이란걸 알게됨.

html

<form id="todo-form">
      <input type="text" placeholder="Write To Do and Press Enter" required />
</form>
<ul id="todo-list"></ul>

JS

const toDoForm = document.querySelector("form#todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector("ul#todo-list");
// ul id로 겟

function paintToDo(newToDo) {
  const li = document.createElement("li");
  // li 만듬
  const span = document.createElement("span");
  // span 만듬
  li.appendChild(span);
  // li에 span 넣음
  span.innerText = newToDo;
  // span에 input.value 넣음 (newToDo)
  toDoList.appendChild(li);
  // ul에 li 넣음
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  toDoInput.value = "";
  paintToDo(newToDo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

O_o!!!!!!