为什么 appendChild 添加的新节点在离开函数后消失了？答案

【问题标题】：Why a new node added by appendChild diasppears after leaving the function?为什么 appendChild 添加的新节点在离开函数后消失了？
【发布时间】：2016-06-22 21:33:07
【问题描述】：

请看下面的代码：

**page.html**:
    <!DOCTYPE html>
    <html>
    <head>
        <title> Playing with JavaScript </title>
        <script src="myjs.js"> </script>
    </head>

<body id="body">

<ul id="mylist">
    <li> David </li>
    <li> Aharon </li>
</ul>

<form>
<input type="text" name="user_input"> <br>
<button onclick="add_item(user_input.value)"> add_item </button>
</form>

</body>
</html>


**myjs.js**    
function add_item(user_input) {
        var new_li = document.createElement("li");
        var new_text = document.createTextNode(user_input);
        new_li.appendChild(new_text);
        document.getElementById("mylist").appendChild(new_li);
    }

此代码创建一个包含两个名称的列表并显示一个按钮和一个输入行。一旦用户在输入行中输入新名称并单击按钮，新名称应该被添加到列表中。

它发生的时间很短，然后列表中的新元素就消失了。您知道我可以在代码中更改哪些内容以使列表中的新元素永久保留吗？

【问题讨论】：

标签： javascript dom onclick appendchild createelement

【解决方案1】：

我认为这是因为您的表单已提交并且页面正在重新加载

在您的按钮处添加type="button"

工作示例

function add_item(user_input) {
  var new_li = document.createElement("li");
  var new_text = document.createTextNode(user_input);
  new_li.appendChild(new_text);
  document.getElementById("mylist").appendChild(new_li);
}

<form>
  <input type="text" name="user_input"> <br>
  <button type="button" onclick="add_item(user_input.value)"> add_item </button>
</form>
<ul id="mylist"></ul>

<button> 元素有 3 个 type ：

提交：默认类型，如果没有指定提交表单的类型
重置：谁重置/清除表单中的输入
按钮：无具体操作

【讨论】：

解决了这个问题。但是，在 'button' 标签内写 type="button" 是什么意思呢？我真的必须告诉浏览器一个按钮就是一个按钮吗？！
@CrazySynthax 因为<form> 中的默认按钮类型是提交按钮。因此，当您不指定类型时，它会发送表单。

【解决方案2】：

我想页面正在重新加载，因为您的按钮元素是表单内的提交按钮 - 当没有为按钮指定 type 属性时，它默认成为提交按钮。您的表单没有指定操作，因此提交会重新加载当前页面。

将type="button" 添加到按钮。

这意味着按钮没有默认行为，只执行 JS 明确执行的操作。

【讨论】：

解决了这个问题。但是，在 'button' 标签内写 type="button" 是什么意思呢？我真的必须告诉浏览器按钮就是按钮吗？！
正如我所说，默认情况下，表单中的按钮元素是 submit 按钮，所以是的，您必须在不需要时明确告诉浏览器。我在答案的末尾添加了一个额外的注释。