<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<marquee>增加修改删除图片</marquee>
<script type="text/javascript">
function addpicture(){
var v1 = document.createElement("img");
v1.src = "../../img/img/3.jpg";
document.getElementById("div1").insertBefore(v1,document.getElementById("p1"));
}
function modifypicture(){
var v3 = document.getElementById("div1");//获取父类容器
var arr1 =document.getElementsByTagName("img");
if(arr1.length>0){
var v4 =document.createElement("img");
v4.src ="../../img/img/2.jpg";
v3.replaceChild(v4,arr1[arr1.length-1]);
}else{
alert("wrong");
}
}
function deletepicture(){
var v3 = document.getElementById("div1");
var arr2 = document.getElementsByTagName("img");
if(arr2.length>0){
v3.removeChild(arr2[arr2.length-1]);
}else{
alert("wrong");
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" name="btn1" id="btn1" value="add" onclick="addpicture()"/>
<input type="button" name="btn2" id="btn2" value="modify" onclick="modifypicture()"/>
<input type="button" name="btn3" id="btn3" value="delete" onclick="deletepicture()"/>
<p id="p1"></p>
</div>
</body>
</html>