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个类型：

提交：默认类型
重置：以表格
按钮：无特定操作

为什么在离开函数后由appendChild diasppears添加新节点？

2 个答案: