如何使用HTML和JavaScript通过表单为grid容器新增网格项

• 计数变量childNumber原定义在函数内部，每次调用都会被重置为1，需移至函数外部实现累加效果
• grid容器在HTML中仅声明了类属性，原有代码使用getElementById无法选中对应元素，需给容器新增id属性grid-container
• insertAdjacentHTML第一个参数为插入位置标识，不支持自定义值test，要追加到容器末尾可传入beforeend
• 新增的节点未添加grid-item类，无法匹配预设的网格项样式，需补充类名
• 表单按钮默认是提交类型，点击会触发页面刷新，需设置type="button"阻止默认行为
• 原有传参逻辑无法直接获取输入框内容，需在函数内读取输入框的value属性获取用户输入

<!DOCTYPE html>
<html>
<head>
  <script>
    // 计数变量移到函数外部
    let childNumber = 1;
    function addNote() {
      let noteContainer = document.getElementById("grid-container");
      // 获取输入框内容
      let inputContent = document.getElementById("note").value;
      // 新增节点添加grid-item类，拼接内容
      let newNote = `<div class="grid-item"><p>Child${childNumber}: ${inputContent}</p></div>`;
      // 修正插入位置参数
      noteContainer.insertAdjacentHTML("beforeend", newNote)
      childNumber++;
      // 插入完成后清空输入框
      document.getElementById("note").value = '';
    }
  </script>
</head>
<body>
  <style>
    #note {
      height: 50px;
      font-size: 14pt;
    }
    .grid-container {
      display: grid;
      grid-template-rows: repeat(auto-fill, [row] auto);
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 10px;
    }
    .grid-item {
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
  <!-- 给grid容器新增id属性 -->
  <div class="grid-container" id="grid-container">
    <div class="grid-item"></div>
  </div>
  <div>
    <h2>Notes</h2>
    <form>
      <label for="Note">Add Note</label><br>
      <input type="text" id="note" name="Note"><br>
      <!-- 按钮设置为button类型，阻止默认提交行为 -->
      <button type="button" onclick="addNote()">Submit</button>
    </form>
  </div>
</body>
</html>

额外优化：将grid的行模板设置为repeat(auto-fill, [row] auto)实现自动新增行，新增网格间距gap属性优化视觉效果，输入框高度从200px调整为50px更符合单行输入的使用习惯

内容的提问来源于stack exchange，提问作者Chris Drakeford