javascript如何使用按钮将元素动态添加到表单标记_Javascript_Html

javascript如何使用按钮将元素动态添加到表单标记

javascript html

javascript如何使用按钮将元素动态添加到表单标记,javascript,html,Javascript,Html,我有一个带有表单标签的html视图，我需要使用一个按钮点击向表单动态添加文本，下面的完整代码在我删除标签时运行良好，但当我保留表单标签时，似乎页面正在刷新，文本正在消失 <html> <body> <form > <button onclick="create()">Create Heading</button> </form> <script> function

我有一个带有表单标签的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>


创建标题
函数create（）{
var h1=document.createElement（'h1'）；
h1.textContent=“新标题！！！”；
h1.setAttribute（'class'，'note'）；
文件.正文.附件（h1）；
}

用于防止默认操作：

函数创建（事件）{
event.preventDefault（）；//添加此
var h1=document.createElement（'h1'）；
h1.textContent=“新标题！！！”；
h1.setAttribute（'class'，'note'）；
文件.正文.附件（h1）；
}


创建标题

您需要使用preventDefault（）阻止默认提交行为


创建标题
函数创建（e）{
e、 预防默认值（）；
var h1=document.createElement（'h1'）；
h1.textContent=“新标题！！！”；
h1.setAttribute（'class'，'note'）；
文件.正文.附件（h1）；
}

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

</form>

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