JavaScript - innerHTML

首页 / JavaScript入门教程 / JavaScript - innerHTML

innerHTML 属性可用于在html文档上编写动态html。它主要用于网页中以生成动态html,例如注册表单,评论表单,链接等。

innerHTML属性示例

在此示例中,无涯教程将在用户单击按钮时创建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>

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

这一章《JavaScript - innerHTML》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

好记忆不如烂笔头。留下你的足迹吧 :)

相关推荐

面试现场 -〔白海飞 - 〕

Java业务开发常见错误100例 -〔朱晔 - 〕

正则表达式入门课 -〔涂伟忠 - 〕

Linux内核技术实战课 -〔邵亚方 - 〕

无法使用 D3 和 React 在 useEffect 挂钩中进行画笔交互并设置状态

未捕获的错误:`style` 属性需要从样式属性到值的映射

Antd Pagination 更改“页面”文本

强制输入值(Angular )

JavaScript:将分数添加到保存的分数

有没有办法在给定一组值的情况下创建动态范围,并计算每个范围有多少

视频推荐

JavaScript - 31-字面量 更多视频教程 »