I could only add 1 list dynamically. I want to add one list after another whenever I click the button. Can someone help me out. Also, I am not supposed to do anything in my html file.
This is my code
let newList = document.querySelector('input');
let addList = document.getElementById('addBtn');
let ulist = document.querySelector('ul');
let h1Node = document.createTextNode("");
addList.addEventListener('click', addNewList);
newList.addEventListener('input', updateValue);
function addNewList(e) {
let head1 = document.createElement('h1');
let list = document.createElement('li');
list.appendChild(head1);
ulist.appendChild(list);
head1.appendChild(h1Node);
}
function updateValue(e) {
h1Node.textContent = e.target.value;
}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Project 1</title><script src="main.js" async></script><link href="main.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet"></head><body><div class="container"><div class="list"><ul><li><h1>List Number 1</h1></li><li><h1>List Number 2</h1></li><li><h1>List Number 3</h1></li><li><h1>List Number 4</h1></li></ul><form method="" action=""><input type="text" id="to-doList"></form><button type="submit" id="addBtn">Add</button></div></div></body></html>
