将html表单输入映射到新形成的元素内的javascript对象

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>
<div id="result"></div>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为
  
  // 创建一个空对象
  var formData = {};
  
  // 获取表单元素的值，并存储在formData对象中
  formData.name = document.getElementById("name").value;
  formData.email = document.getElementById("email").value;
  
  // 创建一个新的元素
  var newElement = document.createElement("div");
  
  // 将formData对象的属性值映射到新元素的相应属性上
  newElement.innerHTML = "姓名：" + formData.name + "<br>邮箱：" + formData.email;
  
  // 将新元素添加到文档中
  document.getElementById("result").appendChild(newElement);
  
  // 清空表单输入
  document.getElementById("myForm").reset();
});