我正在尝试创建一个列表，但它不会创建超过 1 个列表

Question

我只能动态添加 1 个列表。 每当我单击按钮时，我都想添加一个又一个列表。 有人可以帮我吗。 另外，我不应该在我的 html 文件中做任何事情。

这是我的代码

 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>

Answer 1

每次创建新的列表元素时都需要创建一个新的h1Node 。

您不需要updateValue函数，只需在单击按钮时获取输入值。

 let newList = document.querySelector('input'); let addList = document.getElementById('addBtn'); let ulist = document.querySelector('ul'); addList.addEventListener('click', addNewList); function addNewList(e) { let head1 = document.createElement('h1'); let list = document.createElement('li'); let h1Node = document.createTextNode(newList.value); list.appendChild(head1); ulist.appendChild(list); head1.appendChild(h1Node); h1Node = document.createTextNode(""); }

 <!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>

我正在尝试创建一个列表，但它不会创建超过 1 个列表

问题描述

1 个解决方案

解决方案1
0 2020-02-12 23:54:25

我正在尝试创建一个列表，但它不会创建超过 1 个列表

问题描述

1 个解决方案

解决方案1 0 2020-02-12 23:54:25

解决方案1
0 2020-02-12 23:54:25