1. 程式人生 > >js的node物件(節點的使用)

js的node物件(節點的使用)




<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function copy1(){
var i1=document.getElementById("i1");
var node1=i1.cloneNode(i1);
i1.parentNode.appendChild(node1);
}
function add1(){
var i1=document.getElementById("i1");
var newnode=document.createElement("img");
newnode.src="img/1.jpg";
i1.parentNode.insertBefore(newnode,i1);
}
function remove1(){
var i1=document.getElementById("i1");
   i1.parentNode.removeChild(i1);
}
function replace1(){
  var i1=document.getElementById("i1");
  var newnode=document.createElement("img");
  newnode.src="img/1.jpg";
  i1.parentNode.replaceChild(newnode,i1);
}

</script>
</head>
<body>
<img id="i1" src="img/8.jpg" width="200px" height="300px"/>
<input id="i6" type="button" value="複製圖片" onclick="copy1()"/>
<input id="i3" type="button" value="新增圖片" onclick="add1()"/>
<input id="i4" type="button" value="刪除圖片" onclick="remove1()"/>
<input id="i5" type="button" value="替換圖片" onclick="replace1())"/>

</body>
</html>