极客笔记Javascript innerHTML属性
innerHTML属性可用于在html文档中编写动态html。
它主要用于web页面中生成动态html，如注册表单、评论表单、链接等。
innerHTML属性示例
在这个示例中，当用户点击按钮时，我们将创建html表单。
在这个示例中，我们在名为mylocation的div内动态编写html表单。我们通过调用document.getElementById()方法来识别此位置。
<script type="text/javascript" >
function showcommentform() {
var data="姓名：<input type='text' name='name'><br>评论：<br><textarea rows='5' cols='80'></textarea>
<br><input type='submit' value='发表评论'>";
document.getElementById('mylocation').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="评论" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
使用innerHTML显示/隐藏评论表单示例
<!DOCTYPE html>
<html>
<head>
<title>First JS</title>
<script>
var flag=true;
function commentform(){
var cform="<form action='Comment'>输入姓名:<br><input type='text' name='name'/><br/>
输入邮箱:<br><input type='email' name='email'/><br>输入评论:<br/>
<textarea rows='5' cols='70'></textarea><br><input type='submit' value='发表评论'/></form>";
if(flag){
document.getElementById("mylocation").innerHTML=cform;
flag=false;
}else{
document.getElementById("mylocation").innerHTML="";
flag=true;
}
}
</script>
</head>
<body>
<button onclick="commentform()">评论</button>
<div id="mylocation"></div>
</body>
</html>