您好，我是 Javascript 新手，在创建新 并将其添加到 DOM 时遇到问题。 (我想使用原生 javascript 而不是 jquery 来完成此操作)。
当我单击“计算”按钮时，我非常短暂地看到文本在屏幕上闪烁，然后消失。没有向 DOM 添加任何内容。
这是我的 JS 脚本:
function makeResponseBox() {
document.getElementById("calculate").onclick = function()
{
var responseBox = document.createElement("DIV"); //create <div>
var para = document.createElement("P");//create <p>
var text = document.createTextNode("Text");//
para.appendChild(text);//append text to para
var newDiv = responseBox.appendChild(para);// append <p> to <div> and assign to variable
document.body.appendChild(newDiv);//append as child to <body>
}
}//close function (makeResponseBox)
window.onload=makeResponseBox;
这是我的 HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Element to DOM</title>
<script src="calculate.js"></script>
</head>
<body id="main">
<h1>Add Element to DOM</h1>
<form id ="form">
<fieldset>
<input type="submit" value="Calculate" id="calculate" />
</fieldset><!-- close fieldset -->
</form><!-- close form -->
</body>
</html>
最佳答案
因为表单已提交，所以页面会重新加载
您需要向监听器添加一个参数，例如 function(e)并调用e.preventDefault()在监听器的开头。
示例:
document.getElementById("calculate").onclick = function(e)
{
e.preventDefault();
var responseBox = document.createElement("DIV"); //create <div>
var para = document.createElement("P");//create <p>
var text = document.createTextNode("Text");//
para.appendChild(text);//append text to para
var newDiv = responseBox.appendChild(para);// append <p> to <div> and assign to variable
document.body.appendChild(newDiv);//append as child to <body>
}
或者您也可以更改按钮的类型以删除提交功能
<input type="button" value="Calculate" id="calculate" />
但是你的<form>变得无用，你可以删除它
关于javascript - 使用 .createElement() 创建一个新的 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31320469/