JavaScript教程-innerHTML
JavaScript教程-属性 innerHTML 可以用于在 HTML 文档中编写动态的 HTML。
它在网页中经常用于生成动态的 HTML，例如注册表单、评论表单、链接等。
innerHTML 属性示例
在这个例子中，当用户点击按钮时，我们将创建一个 HTML 表单。
在这个例子中，我们在具有 id 为 mylocation 的 div 内部动态编写 HTML 表单。我们通过调用 document.getElementById() 方法来识别此位置。
<script type="text/javascript">
function showcommentform() {
var data = "Name:<input type='text' name='name'><br>Comment:<br><textarea rows='5' cols='80'></textarea><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>使用 innerHTML 属性的显示/隐藏评论表单示例
<!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>Enter Comment:<br><textarea rows='5' cols='70'></textarea><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>在这个示例中，当点击按钮时，将显示一个评论表单。如果再次点击按钮，将隐藏评论表单。这是通过设置 innerHTML 属性为空字符串来实现的。如果 flag 变量为 true，则显示评论表单，否则隐藏它。
