<html lang="eng">
<head>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>DOM Manipulation: create element</title>
</head>

<body>
  
  <h3>My weekly tasks:</h3>
  
  <ul id="todo-list">
    <li>Do shopping</li>
    <li>Read emails</li>
    <li>Wash clothes</li>
  </ul>
  
  <button id="addbutton">Add</button>
  <button id="removebutton">Remove</button>
  


  
  
 </body>
 </html>
body {
  font-family: sans-serif;
}





function addElement(){
  const todoList = document.querySelector("#todo-list");
  const list = document.createElement("li");
  return todoList.appendChild(list);
}

function removeElement(){
  const todoList = document.querySelector("#todo-list");
  const list = document.createElement("li");
  return todoList.removeChild(todoList.lastElementChild);
}

const addButton = document.querySelector("#addbutton");
addButton.addEventListener("click", addElement);

const removeButton = document.querySelector("#removebutton");
removeButton.addEventListener("click", removeElement);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.