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 个答案: