如何使用javascript在表单中附加datalist中的元素

当我删除表单标记时，它就工作了，但从HTML添加表单标记后，它就不工作了。下面是我正在尝试的代码，它不工作的原因是什么

函数abc（）{
变量i、ele、节点、父节点；
var num=document.getElementById（“名称”）.value；
//num=parseInt（num）；
var parent=document.getElementById（“listName”）；
var节点=document.createTextNode（num）；
var ele=document.createElement（“选项”）；
元素附加（节点）；
父母、子女（ele）；
//警报（num）；
//num++；
document.getElementById（“名称”）.value=“”；
}

---

因为您使用按钮作为提交类型。 如果您需要客户端操作，则不应维护页面状态（表示不提交）。 在您的情况下，如果您将使用

<input type="button" onclick="abc()" />

到位

<input type="submit" onclick="abc()" /> 

---

因此，它将解决您的问题。

将html更改为

type=button

<input type="button" onclick="abc()"/>

---

使用

提交值对
输入
元素的属性
类型
赋值意味着提交表单

各国确实：

提交：按钮将表单数据提交到服务器。这是
如果未指定属性，或如果属性为
动态更改为空值或无效值

您没有任何表单，因此当前页面被视为实际表单。

单击按钮时，首先调用与
onclick（）
关联的函数。

它在
数据列表中添加了该选项，但您将永远看不到它，因为表单已提交，因此您将返回html页面的初始状态。

您不希望提交表单，但需要一个按钮将单击事件绑定到函数。

因此，不要使用
提交
类型
，而是使用
按钮
类型
进行
输入
：

  <input type="button" value="add option" onclick="abc()" />


这对我很有用：
html->

使用
type=“button”
代替
type=“submit”
对不起！它不适用于onsubmit，原因是什么？您不需要onsubmit，您只能更改为
，但是如果我想使用输入类型“submit”，那么我需要做哪些更改。您应该保留提交的数据。您应该用这些持久化的数据填充数据列表。
<input type="text"  class='form-control' list="city" >
<datalist  id="city">
</datalist>

$("#city").empty(); // first empty datalist 
var options=[];
options[0] = new Option('landan');
options[1] = new Option('york');
options[2] = new Option('liverPool');
$("#city").append(options);