How do I create a new HTML element from JavaScript? [duplicate]

// Theme Switch
const theme = document.getElementById("themeToggle");

theme.addEventListener('click', () => {
    document.body.classList.toggle('dark');

    if (document.body.classList.contains('dark')) {
        theme.src = "/images/icon-sun.svg"
    } else {
        theme.src = "/images/icon-moon.svg"
    }
});

// Input Value Todo
const todoInput = document.getElementById("input-todo");
const createTodo = document.getElementById("createTodo")

createTodo.addEventListener('click', (e) => {
        let value = todoInput.value;
        
})

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,200,300,regular,500,600,700);

:root {
    --header-desktop-image: url("images/bg-desktop-light.jpg");
    --header-mobile-image: url("images/bg-mobile-light.jpg");
    --theme-toggle-icon: url("images/icon-moon.svg");
  
    --bright-blue: hsl(220, 98%, 61%);
    --bg-color: hsl(0, 0%, 98%);
    --text-color: hsl(235, 19%, 35%);
    --todo-bg-color: #fff;
    --btn-text-color: hsl(236, 9%, 61%);
    --border-color: hsl(233, 11%, 84%);
    --hover-color: hsl(235, 19%, 35%);
    --shadow: rgba(0, 0, 0, 0.2);
}

.dark{
    --header-desktop-image: url("images/bg-desktop-dark.jpg");
    --header-mobile-image: url('images/bg-mobile-dark.jpg');
    --theme-toggle-icon: url("images/icon-sun.svg");

    --bright-blue: hsl(220, 98%, 61%);
    --bg-color: hsl(235, 21%, 11%);
    --text-color: hsl(234, 39%, 85%);
    --todo-bg-color: hsl(235, 24%, 19%);
    --cta-text-color: hsl(234, 11%, 52%);
    --border-color: hsl(237, 14%, 26%);
    --hover-color: hsl(236, 33%, 92%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    outline: none;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
}

body {
    background-color: var(--bg-color);
}

.header {
    width: 100%;
    height: 220px;
    background: var(--header-desktop-image);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    z-index: -1;
}

main {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 50px 30px 20px;
}

main header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

main header .logo h1 {
    color: white;
    letter-spacing: 7px;
    font-weight: 700;
}

main header img {
    cursor: pointer;
    width: 26px;
    height: 26px;
}

form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    background-color: var(--todo-bg-color);
    padding: 0 9px;
    border-radius: 8px;

}

input[type="text"] {
    width: 100%;
    border: none;
    padding: 12px 8px;
    outline: none;
    font-size: 18px;
    background-color: var(--todo-bg-color);
}

.status{
    width: 18px;
    height: 17px;
    border-radius: 50%;
    border: 1px var(--text-color) solid;
    cursor: pointer;
}

ul {
    border-radius: 1vh;
    overflow: hidden;
}

ul .todo {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--todo-bg-color);
    color: var(--text-color);
}

ul .todo .todo_name {
    margin-left: 12px;
}

ul .todo .todo_name span {
    font-size: 16px;
    color: var(--text-color);
}

ul .footer {
    width: 100%;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--todo-bg-color);
    color: var(--text-color);
}

ul .cta {
    margin-top: 30px;
    width: 100%;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--todo-bg-color);
    color: var(--text-color);
}

ul .cta span {
    cursor: pointer;
    color: var(--cta-text-color);
}

.delete_btn {
    cursor: pointer;
    display: block;
    margin-right: 0;
    margin-left: auto;
}

.status-background{
    background: url("images/icon-check.svg"), linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.large_cta {
    display: none;
    cursor: pointer;
}

.clear_completed {
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    main {
        margin: 0 auto;
        max-width: 80%;
    }

    .large_cta {
        display: block;
    }

    .large_cta span {
        margin-right: 15px;
    }

    li.cta {
        display: none;
    }
}

@media screen and (min-width: 960px) {
    main {
        margin: 0 auto;
        max-width: 60%;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Todo app</title>
</head>
<body>
  <div class="header"></div>

  <main>
    <header>
      <div class="logo"><h1>TODO</h1></div>
      <img src="/images/icon-moon.svg" alt="sun-icon" id="themeToggle">
    </header>

    <form action="" class="form">
      <label for="input-todo" id="createTodo" class="status"></label>
      <input type="text" class="input-todo" id="input-todo" placeholder="Create a new todo...">
    </form>

    <ul>
      <li class="todo">
        <div class="status"></div>
        <div class="todo_name"><span>Need to charge phone</span></div>
        <div class="delete_btn"><img src="/images/icon-cross.svg" alt=""></div>
      </li>

      <li class="footer">
        <div class="items_left">
          <span class="left">5</span> 
          <span>items left</span>
        </div>

        <div class="large_cta">
          <span id="all">All</span>
          <span id="active">Active</span>
          <span id="Completed">Completed</span>
        </div>

        <div class="clear">
          <span class="clear_completed">Clear Completed</span>
        </div>
      </li>

      <li class="cta">
        <span id="all">All</span>
        <span id="active">Active</span>
        <span id="Completed">Completed</span>
      </li>
    </ul>
  </main>

  <script src="/main.js"></script>
</body>
</html>