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

Question

请看下面的代码：

**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);
    }

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

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

Answer 1

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

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

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

Answer 2

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

在您的按钮上添加 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 :

submit : default type if no type are specified who submit a form
reset : who reset/clear input in a form
按钮：无特定操作

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

Why a new node added by appendChild diasppears after leaving the function?

javascript

dom

onclick

appendchild

createelement