JavaScript:提交后在表单下显示元素

JavaScript是一种广泛应用于前端开发的编程语言，它可以通过在网页中嵌入脚本代码来实现动态交互和数据处理。在表单提交后，在表单下显示元素可以通过以下步骤实现：

首先，需要在HTML中定义一个表单元素，可以使用<form>标签来创建一个表单，并设置相应的属性，如action和method。

<form action="submit.php" method="post">
  <!-- 表单内容 -->
</form>

在表单中添加需要显示的元素，可以使用<input>、<textarea>等标签来创建输入框或文本域。

<form action="submit.php" method="post">
  <input type="text" name="name" placeholder="姓名">
  <textarea name="message" placeholder="留言"></textarea>
  <input type="submit" value="提交">
</form>

接下来，使用JavaScript来处理表单的提交事件。可以通过给表单元素添加onsubmit事件来触发相应的函数。

<form action="submit.php" method="post" onsubmit="showElement(event)">
  <!-- 表单内容 -->
</form>

<script>
  function showElement(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取表单数据
    var name = document.getElementsByName("name")[0].value;
    var message = document.getElementsByName("message")[0].value;

    // 创建新的元素并显示表单数据
    var element = document.createElement("div");
    element.innerHTML = "姓名：" + name + "<br>留言：" + message;
    document.body.appendChild(element);
  }
</script>

在上述代码中，showElement函数会在表单提交时被调用。首先，通过event.preventDefault()阻止表单的默认提交行为。然后，使用document.getElementsByName方法获取表单中输入框和文本域的值，并将其显示在一个新创建的<div>元素中，最后将该元素添加到页面的<body>中。

这样，当用户点击表单的提交按钮时，表单数据将被获取并以指定的格式显示在页面中。

推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud CloudBase），它是一款全托管的云原生应用开发平台，提供了前端开发、后端开发、数据库、存储等一体化的解决方案，可帮助开发者快速构建和部署应用。了解更多信息，请访问腾讯云云开发官网：https://cloud.tencent.com/product/tcb。