javascript - 向文档添加新元素,但表单只是自行刷新

标签 javascript form-submit createelement

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

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


};

单击按钮后如何添加新元素? 谢谢。

最佳答案

删除type="submit"

编辑:事实证明,仅删除提交属性是不够的。

应更改为:type="button":

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

关于javascript - 向文档添加新元素,但表单只是自行刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42189078/

相关文章:

python - Selenium定位提交按钮

javascript - 检查多个函数是否为真,然后做一些事情

javascript - 使用构造函数循环生成测验问题答案的复选框

c# - 如何从 javascript 调用 asp.net .cs 页面的方法?

javascript - 使用 continuation-local-storage 时如何解决 promise ?

javascript - 如何在 AngularJS 中包含查看特定的 .less 文件

javascript - createElement - 选择散布在文本中间的框

javascript - 如何在我的元素中单独使用 Twitter Bootstrap 脚本?

php - 在同一个页面依次执行多个提交

javascript - HTML 元素添加到 Javascript for 循环中,然后在计数器递增时删除