在html表单中单击submit按钮时，如何在html和javascript中添加div面板？

在过去的3到4天里，我被一个问题困住了。我用html和javascript创建了一个学生注册表单。我首先通过javascript进行了验证，然后在javascript中加入了字符串连接，以提交表单的所有值，并通过alert显示表单的提交。现在这里的问题是，我想在div面板中显示所有提交值，但我不能这样做，因为我是这个领域的业余爱好者，我需要一些指导和帮助来制作javascript和html代码，以便在提交按钮上包含div面板。我正在尝试跟踪此网站：。有人能帮我把w3schools代码包括在我的代码中吗

我的HTML代码：

注册表格
登记处
名字
姓
卷号
等级
电子邮件
提交

只需添加带有一些

id

属性的div，如下所示：

然后，每当您想要显示某些内容时：

var firstname = document.getElementById('inputfirstname'); //input
document.getElementById('formData').innerText = 'First Name : ' + firstname.value;

---

你可以排成一行，里面有5个单元格。然后在showme（）函数中，可以为这些单元格赋值

                       <div class="row" id="studentDetail" sytle="display: 
                         none;">
                        <div class="col-sm-2" id="firstName"></div>
                        <div class="col-sm-2" id="lastName"></div>
                        <div class="col-sm-2" id="rolNo"></div>
                          <div class="col-sm-2" id="class"></div>
                         <div class="col-sm-2" id="email"></div>

                       </div>

                function showme() {

                    var firstname = document.getElementById('inputfirstname');
                    var lastname = document.getElementById('inputlastname');
                    var rollno = document.getElementById('inputrollno');
                    var Class = document.getElementById('inputclass');
                    var email = document.getElementById('inputemail');

                 //now set these values to div elements of the row

                  document.getElementById("firstName").text(firsname.value);
                  document.getElementById("lastName").text(lastname.value);
                  document.getElementById("rolNo").text(rollno.value);
                  document.getElementById("class").text(Class.value);
                  document.getElementById("email").text(email.value);
                  //now show the hidden div
                  document.getElementById("studentDetail").style.display = "block";
               }

函数showme（）{
var firstname=document.getElementById（'inputfirstname'）；
var lastname=document.getElementById（'inputlastname'）；
var rollno=document.getElementById（'inputrollno'）；
var Class=document.getElementById（'inputclass'）；
var email=document.getElementById（'inputemail'）；
//现在将这些值设置为行的div元素
document.getElementById（“firstName”）.text（firsname.value）；
document.getElementById（“lastName”）.text（lastName.value）；
document.getElementById（“rolNo”）.text（rollno.value）；
document.getElementById（“class”）.text（class.value）；
document.getElementById（“email”）.text（email.value）；
//现在显示隐藏的div
document.getElementById（“studentDetail”）.style.display=“block”；
}

检查此代码

函数formValidation（）{
var inputfirstname=document.registration.inputfirstname；
var inputlastname=document.registration.inputlastname；
var inputrollno=document.registration.inputrollno；
var inputclass=document.registration.inputclass；
var inputemail=document.registration.inputemail；
if（firstname_验证（inputfirstname，5,12））{
if（lastname\u验证（inputlastname，6,12））{
if（所有数字（输入序号））{
if（字母数字（inputclass））{
如果（ValidateEmail（inputemail））{
警报（“表单已成功提交”）；
返回true；
}
}
}
}
}
返回false；
}
函数名\验证（inputfirstname、mx、my）{
var input\u firstname\u len=inputfirstname.value.length；
如果（input_firstname_len==0 | | input_firstname_len>=my | | input_firstname_len=my | | inputlastname_len