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