借助JQuery更简单实现,这里是一个用原生javascript实现的示例:
<html>
<head>
<title></title>
<script type="text/javascript">
function addButton(){
var html ="<input type=\"button\" value=\"新加\" onclick=\"newButton()\">"
document.getElementById("add").innerHTML=html
}
function newButton(){
alert("我是新加的按钮")
}
</script>
</head>
<body>
<div>
<p>点击该按钮增加一个新按钮</p>
<input type="button" value="点击增加" onclick="addButton()">
<p>新增的按钮在这显示</p>
<div id="add"></div>
</div>
</body>
</html>
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
可以在按钮元素上增加事件属性onclick,属性内写你要执行的代码或函数。也可以在代码中直接绑定事件,如通过querySelector等查找到元素后,在元素上直接加onclick事件。
还可以通过事件指派,绑定事件在按钮上面。
1、打开Hbuilder编辑器,新建一个html空白文档,输入基本的结构,然后按下Crtl+S保存一下:
2、创建一个button按钮,给按钮设置一个id,名字设置为“myBT”,创建一个用来显示隐藏的div,将其id设置为“main”:
3、给div和button设置一些样式,为了美观好看,这里无需设置display,因为默认就是显示的:
4、编写js脚本,这里用到Jquery,给button添加一个点击事件,然后获取div的dom,判断dom中的display属性值,如果是“none”,就显示div,否则则隐藏:
5、全部完成后,按下crtl+s保存,来到编辑器的右侧,观察显示效果,此时div是显示的:
6、点击hide按钮,会发现div消失了,反复点击按钮会重复显示隐藏的效果,以上就是用JS控制div显示隐藏的案例: