如何使用vanilla javascript - no jquery将用户输入从单个表单转换为不同div中的不同文本？

使用vanilla JavaScript可以将用户输入从单个表单转换为不同div中的不同文本。下面是一个实现的示例代码：

HTML代码：

<form id="myForm">
  <input type="text" id="nameInput" placeholder="请输入姓名">
  <input type="email" id="emailInput" placeholder="请输入邮箱">
  <input type="submit" value="提交">
</form>

<div id="nameDiv"></div>
<div id="emailDiv"></div>

JavaScript代码：

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var name = document.getElementById("nameInput").value;
  var email = document.getElementById("emailInput").value;

  document.getElementById("nameDiv").textContent = "姓名：" + name;
  document.getElementById("emailDiv").textContent = "邮箱：" + email;

  document.getElementById("myForm").reset(); // 重置表单
});

上述代码中，我们首先通过getElementById方法获取表单元素和目标div元素。然后，我们使用addEventListener方法监听表单的提交事件，并使用preventDefault方法阻止表单的默认提交行为。

在事件处理程序中，我们获取用户输入的姓名和邮箱，并将其分别赋值给name和email变量。接下来，我们使用textContent属性将用户输入的文本显示在对应的div中。

最后，我们使用reset方法重置表单，以便用户可以继续输入新的内容。

这样，当用户在表单中输入内容并提交时，对应的文本将会显示在不同的div中。

这个方法适用于任何需要将用户输入从单个表单转换为不同div中的情况，例如在一个联系表单中将用户输入的姓名、邮箱、电话等信息显示在不同的div中。

腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc