创建一个新的< div>与.createElement（） [英] Create a new <div> with .createElement()
问题描述
您好我是Javascript的新手，在 DOM 中创建并添加新的 存在问题。 。
当我点击计算按钮按钮，我非常简要地看到屏幕上的文本闪烁，然后消失。没有添加到DOM。
以下是我的JS脚本：
function makeResponseBox（）{
document.getElementById（calculate）。onclick = function（）
{
var responseBox = document.createElement（DIV）; //创建< div>
var para = document.createElement（P）; //创建< p>
var text = document.createTextNode（Text）; //
para.appendChild（text）; //将文本附加到para
var newDiv = responseBox.appendChild（para）; / / append< p>到< div>并分配给变量
document.body.appendChild（newDiv）; //作为子项追加到< body>
}
} //关闭函数（makeResponseBox）
window.onload = makeResponseBox;
这是我的HTML：
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< title>将元素添加到DOM< / title>
< script src =calculate.js>< / script>
< / head>
< body id =main>
< h1>将元素添加到DOM< / h1>
< form id =form>
< fieldset>
< input type =submitvalue =Calculateid =calculate/>
< / fieldset><！ - close fieldset - >
< / form><！ - close form - >
< / body>
< / html>
这是因为表单被提交以便页面重新加载
您需要为侦听器添加一个参数，比如 function（e），并调用 e.preventDefault（）。
例子：
< pre $ document.getElementById（calculate）。onclick = function（e）
{
e.preventDefault（）;
var responseBox = document.createElement（DIV）; //创建< div>
var para = document.createElement（P）; //创建< p>
var text = document.createTextNode（Text）; //
para.appendChild（text）; //将文本附加到para
var newDiv = responseBox.appendChild（para）; / / append< p>到< div>并分配给变量
document.body.appendChild（newDiv）; //作为子项追加到< body>
}
或者您也可以更改按钮的类型以移除提交函数
< input type =buttonvalue =Calculateid =calculate/>
但是您的< form> 成为没用，你可以删除它
Hi I'm new to Javascript, having problem creating and adding a new to the DOM. (I want to do this with native javascript not jquery).
When I click the "Calculate" button, I very briefly see the Text flash on the screen and then disappear. Nothing added to the DOM.
Here is my JS script:
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;
Here is my 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>
It's because the form is submitted so the page is reloaded
You need to add a parameter to your listener , say function(e) and call e.preventDefault() at the beginning of the listener.
example:
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>
}
Or you could also change the type of your button to remove the submit function
<input type="button" value="Calculate" id="calculate" />
But then your <form> become useless and you could remove it
这篇关于创建一个新的< div>与.createElement（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
