Javascript document.createElement无法按我希望的方式工作_Javascript

Javascript document.createElement无法按我希望的方式工作

javascript

Javascript document.createElement无法按我希望的方式工作,javascript,Javascript,我不知道如何在这个网站上用代码写东西，但我对Javascript是新手，我正在尝试制作一个简单的小脚本，允许我按submit和post消息它不起作用，我认为它与标记和文档有关。createElement <!DOCTYPE html> <html> <title>This stuff</title> <head> <style> div.postbox {

我不知道如何在这个网站上用代码写东西，但我对Javascript是新手，我正在尝试制作一个简单的小脚本，允许我按submit和post消息

它不起作用，我认为它与

标记和

文档有关。createElement

<!DOCTYPE html> 
<html> 
    <title>This stuff</title> 
    <head> 
        <style> 
        div.postbox {
            position:fixed;
            top:500px;
        } 
        </style>
    </head> 
    <body> 
        <div id="messages"> </div> 
        <div class="postbox"> 
            <form> 
                <input type="text" id="messagecontent"> 
                <button onclick="post()">submit </button> 
            </form> 
        </div> 
        <script> 
            function post() { 
                var chats = document.getElementById("messages"); 
                var val = document.getElementById("messagecontent").value; 
                var post = document.createElement("div");
                post.textContent = val; 
                chats.appendChild(post); 
            }
        </script> 
    </body> 
</html>


这东西
邮政信箱{
位置：固定；
顶部：500px；
} 
提交
函数post（）{
var chats=document.getElementById（“消息”）；
var val=document.getElementById（“messagecontent”）.value；
var post=document.createElement（“div”）；
post.textContent=val；
聊天室。儿童（post）；
}

这里是

首先，如果不使用表单，为什么要使用它？如果不必重新加载页面，只需删除表单标记即可。我的HTML类似于：

<div id="messages"></div>

<div class="postbox">
   <input type="text" id="messagecontent"> 
   <button onclick="post()">submit </button> 
</div>


提交

在JS中，我将使用innerHTML设置

<script type="text/javascript">

   function post()
   {
      //get the messages div
      var chats = document.getElementById("messages");    
      //get the textbox value
      var val = document.getElementById("messagecontent").value;
      //add the textbox value into the messages div
      chats.innerHTML += val + '<br />';
   }

</script>


职能职位（）
{
//获取消息div
var chats=document.getElementById（“消息”）；
//获取文本框的值
var val=document.getElementById（“messagecontent”）.value；
//将文本框值添加到messages div中
chats.innerHTML+=val+'
'；
}

为什么不使用

 <button type="button onclick="post()">submit </button>

您的小提琴无法工作，因为您将代码放入了onLoad
事件（您可以在左侧的组合框中看到它）。因此，post
函数不是全局函数，无法调用
关于守则本身：

建议将该功能放入头部
我认为使用表单是一个好主意（即使您不向服务器发送任何内容），但前提是您将按钮替换为submit。例如，这将允许您使用ENTER
而不是单击按钮来发送消息

要做到这一点，您不必检测单击，而是检测表单验证。并取消此验证，因此不会向服务器发送任何内容
<!DOCTYPE html>
<html>
    <title>This stuff</title>
    <head>
        <style>
            div.postbox {
                position:fixed;
                top:500px;
            }
        </style>
        <script>
            function post() {
                var chats = document.getElementById("messages");
                var val = document.getElementById("messagecontent").value;
                var post = document.createElement("div");
                post.textContent = val;
                chats.appendChild(post);

                // Returning false is important in order to cancel the form validation!
                return false;
            }
        </script>
    </head>
    <body>
        <div id="messages"> </div>
        <div class="postbox">
            <form onsubmit="return post();">
                <input type="text" id="messagecontent">
                <input type="submit" value="Add message" />
            </form>
        </div>
    </body>
</html>


这东西
邮政信箱{
位置：固定；
顶部：500px；
}
职能职位（）{
var chats=document.getElementById（“消息”）；
var val=document.getElementById（“messagecontent”）.value；
var post=document.createElement（“div”）；
post.textContent=val；
聊天室。儿童（post）；
//返回false对于取消表单验证非常重要！
返回false；
}
表单已发布，因此无论您做什么，都将不可见，因为页面已重新加载。请看这里，我如何使其不重新加载，并且我可以看到它？请使用
，因为默认情况下，没有类型的按钮是提交按钮。