Jquery documnent.createElement（）未显示
我正试图使用javascript编写自己的注释脚本，以获取输入字段的值，然后使用document.createElement（Element）创建一个包含该信息的div。奇怪的是，当我点击SubmitForm按钮时，它调用javascript函数将div附加到DOM中，然后立即删除它Jquery documnent.createElement（）未显示,jquery,createelement,Jquery,Createelement,我正试图使用javascript编写自己的注释脚本，以获取输入字段的值，然后使用document.createElement（Element）创建一个包含该信息的div。奇怪的是，当我点击SubmitForm按钮时，它调用javascript函数将div附加到DOM中，然后立即删除它 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascrip
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<style>
.newComment{
width: 100%;
height: 50px;
background: green;
margin-top: 20px;
}
</style>
<body onload="addElement()">
<form>
<input type="text" name="user" style="margin-top: 20px; font-size: 15px;" placeholder="Username" id="username"></input>
<br />
<br />
<textarea type="text" name="comment" style="width: 100%; height: 100px; font-size: 15px;" placeholder="Comment" id="comment"></textarea>
<br />
<br />
<input type="submit" style="float: left; margin-right: 15%;" onclick="addElement()"></input>
</form>
<script>
document.body.onload = addElement;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
/*function send(){
var name = document.getElementById("username").value
var comment = document.getElementById("comment").value
console.log(name, comment)
var newDiv = document.createElement('div')
$(newDiv).attr('class', 'newComment')
var divClass = $(newDiv).attr("class")
console.log(divClass)
$(newDiv).appendTo("body")
$(".newComment").html(name)
}*/
</script>
</body>
.新来者{
宽度：100%；
高度：50px；
背景：绿色；
边缘顶部：20px；
}
document.body.onload=添加元素；
函数addElement（）{
//创建一个新的div元素
//给它一些内容
var newDiv=document.createElement（“div”）；
var newContent=document.createTextNode（“您好，欢迎光临！”）；
appendChild（newContent）；//将文本节点添加到新创建的div中。
//将新创建的元素及其内容添加到DOM中
var currentDiv=document.getElementById（“div1”）；
document.body.insertBefore（newDiv，currentDiv）；
}
/*函数send（）{
var name=document.getElementById（“用户名”）.value
var comment=document.getElementById（“comment”）.value
console.log（名称、注释）
var newDiv=document.createElement（'div'）
$（newDiv.attr（'class'，'newComment'））
var divClass=$（newDiv.attr（“类”）
console.log（divClass）
$（newDiv）.appendTo（“正文”）
$（“.newComment”）.html（名称）
}*/
谢谢。您已将jquery包含在页面中：
$(function() {
$("input[type=submit]").click(function(e) {
e.preventDefault();
var div = $("<div>");
div.text("Hi there and greetings!");
$("body").append(div);
});
});
$（函数（）{
$（“输入[type=submit]”。单击（函数（e）{
e、 预防默认值（）；
var div=$（“”）；
div.text（“你好，大家好！”）；
$（“正文”）。追加（div）；
});
});
falseonclick="addElement();return false;"
提交表单时，浏览器会向表单的操作发送POST请求。在您的情况下，您没有action属性，因此浏览器会发送当前url的帖子，并有效地刷新页面（因此脚本会再次运行并重新开始） 通过单击处理程序返回false，可以防止表单提交：
onclick="addElement(); return false;"
$('input[type="submit"]').click( function ( ) {
addElement();
return false;
} );
最好给该输入一个
id