document.createElement() 不显示答案

【问题标题】：documnent.createElement() not displayingdocument.createElement() 不显示
【发布时间】：2015-02-22 20:48:38
【问题描述】：

我正在尝试编写自己的评论脚本，方法是使用 javascript 获取输入字段的值，然后使用 document.createElement(Element) 创建一个包含该信息的 div。奇怪的是，当我点击提交表单按钮时，它调用了将 div 附加到 DOM 的 javascript 函数，但随后立即将其删除。

<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>

有人可以解释一下为什么在未注释和已注释函数中都会出现这种情况吗？我已经阅读了 jQuery API，它声称这不应该发生，但每次我使用提交按钮时都会发生这种情况。

谢谢。

【问题讨论】：

我认为你不应该两次添加事件处理程序。它可能最终会运行两次......
@nus：没有风险，第二个将取代第一个。添加两次是没有意义的。

标签： jquery createelement

【解决方案1】：

您已在页面中包含 jquery：

$(function() {
    $("input[type=submit]").click(function(e) {
        e.preventDefault();
        var div = $("<div>");
        div.text("Hi there and greetings!");
        $("body").append(div);
    });
});

【讨论】：

也在想同样的事情，但它并没有真正回答为什么它不起作用的问题。不用 jquery 也应该可以做他们想做的事。
@nus 是的，你的权利，但 OP 已在帖子中添加了 jquery 标签，并在他的代码中添加了 jquery 链接。

【解决方案2】：

元素消失的原因是页面被重新加载。提交按钮的默认行为是将表单发送到服务器，因此在将元素添加到页面后，表单会发布到服务器并重新加载页面。

从事件处理程序返回false 以防止默认操作：

onclick="addElement();return false;"

【讨论】：

【解决方案3】：

提交表单时，浏览器会向表单的操作发送 POST 请求。在您的情况下，您没有 action 属性，因此浏览器会为当前 url 发送一个 POST 并有效地刷新页面（因此您的脚本会再次运行并重新开始）。

您可以通过点击处理程序返回 false 来阻止表单提交：

onclick="addElement(); return false;"

虽然最好完全删除该内联 Javascript（混合 HTML 和 Javascript 是个坏主意）并像这样绑定它：

$('input[type="submit"]').click( function ( ) {
    addElement();
    return false;
} );

最好为该输入提供id 并以这种方式选择它，这样您就可以安全地将其他输入元素添加到页面中而不会出现意外结果。

【讨论】：

这是完美的。谢谢。