JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<button class="addListBtn">Click me!</button>
    <ul class="name-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <input type="text" class="list-input">

JavaScript

const userList = document.querySelector(".name-list");
const listInput = document.querySelector(".list-input");
const addListBtn = document.querySelector(".addListBtn");

addListBtn.addEventListener("click", function(){
    const newLi = document.createElement("li");
    const liContent = document.createTextNode(listInput.value);
    newLi.appendChild(liContent);
    userList.appendChild(newLi);
});