向文档添加新元素但表单只是刷新自己

Question

因此，我希望用户在 he/she 单击“添加”按钮时能够添加新段落。当我单击按钮时我可以看到它正在工作，但之后页面会自行刷新，然后所谓的新段落就消失了。

这是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Item Lister</title>
<link rel="stylesheet" type="text/css" href="default.css"\>

</head>
<body>

<h1>ITEM LIST</h1>

<div id="container">
<ol>

</ol>
</div>

</br>
<form>
  <input id="txtbox" type="text" name="txt"/>
</br>
  <button id="add_btn" type="submit" name="add"/>Add</button>
</form>
<script src="myScript.js"></script>
</body>
</html>

这是它的 JS 代码：

add_btn.onclick = function(){
  var msg;
  msg = document.getElementById("txtbox").value;
  var newListElement = document.createElement("li"); 

  var liText = document.createTextNode(msg); 

  newListElement.appendChild(liText); 
  document.getElementById("container").getElementsByTagName('ol')[0].appendChild(newListElement); 


};

点击按钮后如何添加新元素？谢谢

Answer 1

删除type="submit"

编辑：原来只是删除提交属性是不够的。

应该改为：type="button" :

<button id="add_btn" type="button" name="add"/>Add</button>

Answer 2

事实上你至少有两个选择：

删除 type="submit" 正如 Bulent Vural 已经提到的那样
或者您的 onClick 处理程序 return false

向文档添加新元素但表单只是刷新自己

Adding new elements to a document but the form is just refreshing itself

javascript

form-submit

createelement