innerHTML 属性可用于在html文档上编写动态html。它主要用于网页中以生成动态html,例如注册表单,评论表单,链接等。
在此示例中,无涯教程将在用户单击按钮时创建html表单。
链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-innerHTML.html
来源:LearnFk无涯教程网
在此示例中,在具有id mylocation的div名称内动态编写html表单。通过调用document.getElementById()方法来确定此位置。
<script type="text/javascript" > function showcommentform() { var data="Name:<input type='text' name='name'><br>Comment:<br><pre rows='5' cols='80'></pre> <br><input type='submit' value='Post Comment'>"; document.getElementById('mylocation').innerHTML=data; } </script> <form name="myForm"> <input type="button" value="comment" onclick="showcommentform()"> <div id="mylocation"></div> </form>
<!DOCTYPE html> <html> <head> <title>First JS</title> <script> var flag=true; function commentform(){ var cform="<form action='Comment'>Enter Name:<br><input type='text' name='name'/><br/> Enter Email:<br><input type='email' name='email'/><br><input type='submit' value='Post Comment'/></form>"; if(flag){ document.getElementById("mylocation").innerHTML=cform; flag=false; }else{ document.getElementById("mylocation").innerHTML=""; flag=true; } } </script> </head> <body> <button onclick="commentform()">Comment</button> <div id="mylocation"></div> </body> </html>
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)