javascript 为什么我不能使用 javascript 函数将 appendchild 添加到 html div

Question

我需要使用 javascript 将子控件附加到 html 元素，问题是子控件在调用函数时出现并直接消失，子控件必须在表单标签中

这是我将 child 附加到 html 元素时的代码

<html>
 <body>
  <form  >
<button onclick="create()">Create Heading</button>

</form>

    <script>
  function create() {
    var h1 = document.createElement('h1');
    h1.textContent = "New Heading!!!";
    h1.setAttribute('class', 'note');
    document.body.appendChild(h1);
  }
</script>
   </body>
   </html>

元素 h1 被添加到布局中，立即出现并消失，但是当我删除 <form> 时它完美地工作

Answer 1

当您按下按钮时，看起来表单元素正在提交，刷新页面并使页眉消失。您可能应该问问自己：我真的需要表格吗？是否有一些输入应由服务器处理？

如果你真的需要，那你可以试试prevent the form from submitting

此外，正如 this SO Question 中所指出的，您可以通过将其 type 指定为 'button' 来阻止按钮提交表单。

Answer 2

同意@Drago96 表单提交和页面刷新。

form有什么意义呢。如果你只是追加一个元素

<body>
    <button onclick="create()">Create Heading</button>
    <script>
        function create() {
            var h1 = document.createElement('h1');
            h1.textContent = "New Heading!!!";
            h1.setAttribute('class', 'note');
            document.body.appendChild(h1);
        }
    </script>
</body>

</html>

javascript 为什么我不能使用 javascript 函数将 appendchild 添加到 html div

javascript why i cannot appendchild to html div using javascript function

html

javascript

appendchild