使用 .createElement() 创建一个新的 <div>

Question

嗨，我是 Javascript 的新手，在创建和添加新到 DOM[=28= 时遇到问题]. （我想用原生 javascript 而不是 jquery）.

当我单击 "Calculate" 按钮时，我 非常短暂地 看到文本在屏幕上闪烁然后消失。没有添加到 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> </form> </body> </html>

Answer 1

因为提交了表单所以重新加载了页面

你需要给你的侦听器添加一个参数，说 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> 变得没用了，你可以删除它

Answer 2

将您的提交类型更改为按钮，这将避免重新加载

 <input type="submit" value="Calculate" id="calculate" />

至

<input type="button" value="Calculate" id="calculate" />

如果您想提交表单，请从 js 处理它

使用 .createElement() 创建一个新的 <div>

Create a new <div> with .createElement()

html

javascript

createelement