1、添加几个按钮
<button onclick="add()">添加</button>/*onclick是鼠标事件,当鼠标单击时执行脚本*/
<button onclick="del()">删除</button>
<button onclick="rep()">替换</button>
<div>
</div>
2、js部分
<script>
function add() {
var img = document.createElement("img");/*创建一个img节点*/
img.setAttribute("src", "../images/1.jpg");/*设置照片里面的属性*/
img.setAttribute("id", "hh");/*要设置id为了后来获取,后续操作直接通过tag对节点操作反而不行*/
var div1 = document.getElementsByTagName("div");
div1[0].appendChild(img);
}/*往div里面添加子节点img 要注意这里的数组要告诉它选择第几个div*/
function del() {
var img = document.getElementById("hh");/*先获得img标签要么使用id要么使用clas*/
img.parentNode.removeChild(img);/*必须通过父亲节点删除子节点*/
}
function rep() {
var img = document.getElementById("hh");/*先获得img标签要么使用id要么使用clas*/
img.setAttribute("src", "../images/R-C.jpg");/*设置src属性需要替换的图片*/
}
</script>
注:替换部分只是其中一个方法,通过修改元素属性替换,还可以通过替换节点方式替换。