Javascript 使用appendChild动态添加新表单输入，函数未触发，页面重新加载

为了在我的表单中添加新的项目/字段，我正在使用下面的示例（非常有效），这取决于下拉选择。当前，当选择了正确的下拉列表时，正确的div将与第一个输入一起显示，但是，当我单击“添加”，而不是使用新输入添加一行（在我的测试代码中是这样），页面将重新加载，表单为空。我认为可能与页面上的另一个元素有冲突，但没有找到任何罪魁祸首

工作示例：

<div>
        <label for="item">Enter a new item:</label>
        <input type="text" name="item" id="item">
        <button onclick="addItem()">Add item</button>
    </div>
    <ul>
    </ul>
    <script>
          var list = document.querySelector('ul');
      var input = document.querySelector('input');
      var button = document.querySelector('button');
      button.onclick = function() {
        var myItem = input.value;
        input.value = '';
        var listItem = document.createElement('li');
        var listText = document.createElement('span');
        var listBtn = document.createElement('button');
        listItem.appendChild(listText);
        listText.textContent = myItem;
        listItem.appendChild(listBtn);
        listBtn.textContent = 'Delete';
        list.appendChild(listItem);
        listBtn.onclick = function(e) {
          list.removeChild(listItem);
        }
        input.focus();
      }
    </script>

我的js

我尝试添加一个监听器（并计划在工作后再次添加），但以上只是为了让它工作并进行测试

---

我可以看到新项目被创建，但是当触发

按钮时页面会重新加载。onclick

但我不明白为什么。为什么页面会重新加载？我是否遗漏了任何明显的内容？

我认为您可能遗漏了某些元素的

id

我已经复制粘贴了您的代码，在将

id=“addNew”

添加到按钮和

id=“items”

，然后从按钮中删除

onclick=“addItem（）”

后，它就可以工作了

$（文档）.ready（函数（）{
const list=document.querySelector（'ul#items'）；
const input=document.querySelector（'input#item'）；
const button=document.querySelector（'button#addNew'）；
button.onclick=函数（）{
const myItem=input.value；
input.value=''；
const listItem=document.createElement（'li'）；
const listText=document.createElement（'span'）；
const listBtn=document.createElement（'button'）；
appendChild（listText）；
listText.textContent=myItem；
listItem.appendChild（listBtn）；
listBtn.textContent='Delete'；
list.appendChild（listItem）；
listBtn.onclick=函数（e）{
list.removeChild（listItem）；
};
input.focus（）；
};
});

输入新项目：
添加项

问题在于我忘记设置按钮类型，我在这篇文章中找到了答案：

在按钮上设置类型：

…这将防止它们在事件处理程序中发生异常时触发提交操作。然后，修复removeItem（）函数，使其不会触发异常：

谢谢，我正在查看，将尽快恢复。非常奇怪，我完全按照此方式实现，但仍然没有添加下一行，而是重新加载页面，这肯定是另一个字段或脚本干扰，但我没有看到任何明显的调试。
    div#addMultipleDays.form-group.col-md-2
      label(for='item') Enter a new
      input.form-control(type='text' name='item' id='item')
      button#addNew Add
    ul#items  
      div.text-danger #{booking.addMultipleDaysError}

$(document).ready(function() {
  const list = document.querySelector('ul#items');
  const input = document.querySelector('input#item');
  const button = document.querySelector('button#addNew');
  button.onclick = function() {
    const myItem = input.value;
    input.value = '';
    const listItem = document.createElement('li');
    const listText = document.createElement('span');
    const listBtn = document.createElement('button');
    listItem.appendChild(listText);
    listText.textContent = myItem;
    listItem.appendChild(listBtn);
    listBtn.textContent = 'Delete';
    list.appendChild(listItem);
    listBtn.onclick = function(e) {
      list.removeChild(listItem);
    };
    input.focus();
  };
});