HTML里面的代码虽然写好了但并不是一成不变的，HTML里面的标签可以通过JS操作DOM动态的增删改，只需JS里面写好事件动作就行。
一丶增加一个标签 (增加一个button为例)
初始情况时只有一个button标签，通过JS动态的添加另一个标签，这时就要通过JS操作DOM添加button标签
HMTL代码:
<body>
<div id="box01">
<button id="btn01">button1</button>
</div>
</body>JS代码:
<script type="text/javascript">
window.onload = function(){
//先获取div标签对象
var box = document.getElementById("box01");
//获取div标签下的button标签对象
var btn = document.getElementById("btn01");
//单击btn时的事件
btn.onclick = function(){
//通过标签名创建一个button
var btn2 = document.createElement("button");
//设置button标签里的内容
btn2.innerHTML = "button2";
//将新建的button标签添加到后面
box.appendChild(btn2);
}
}
</script>?
?原始界面显示:
?点击button1后新增了一个button2显示效果:
?二丶删除一个标签 (删除一个button为例)
初始情况时有两个button标签通过JS操作DOM删除掉一个button标签
HTML代码:
<body>
<div id="box01">
<button id="btn01">button1</button>
<button id="btn02">button2</button>
</div>
</body>JS代码:
<script type="text/javascript">
window.onload = function(){
//先获取div标签对象
var box = document.getElementById("box01");
//获取div标签下的第二个button标签对象
var btn = document.getElementById("btn02");
//单击btn时的事件
btn.onclick = function(){
//通过div删除它的第二个button子节点标签
box.removeChild(btn);
}
}
</script>原始界面显示:
?点击button2后button2被删除显示效果:
?三丶修改一个标签也就是替换一个标签(修改一个button为例)
?初始情况时是两个button标签，通过JS操作dom把第二个button替换掉。
HTML代码:
<body>
<div id="box01">
<button id="btn01">button1</button>
<button id="btn02">button2</button>
</div>
</body>JS代码:
<script type="text/javascript">
window.onload = function(){
//先获取div标签对象
var box = document.getElementById("box01");
//获取div标签下的第二个button标签对象
var btn = document.getElementById("btn02");
//单击btn时的事件
btn.onclick = function(){
//将btn(内容为button2)替换成一个全新的内容为button3
//新建一个button标签
var btn3 = document.createElement("button");
//设置新建的标签的内容
btn3.innerHTML = "button3";
//修改(也就是如果父节点div替换)
box.replaceChild(btn3, btn); //第一个参数为新标签，第二参数为即将被替换的旧标签
}
}
</script>原始界面显示:
?点击button2后button2被替换成button3显示效果:
?
