个性化阅读
专注于IT技术分析

JavaScript的innerHTML属性

innerHTML属性可以用来写在HTML文档的动态HTML。

它主要用于在网页生成动态HTML,如登记表,评论表单,链接等。

文字属性的示例

在这个例子中,我们要当用户点击按钮来创建HTML表单。

在这个例子中,我们动态地编写具有ID mylocation的div名称里面的html表单。我们通过调用的document.getElementById()方法identifing这个位置。

<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>

上面的例子中的输出

赞(0)
未经允许不得转载:srcmini » JavaScript的innerHTML属性

评论 抢沙发

评论前必须登录!