css DOM(页面进行标签的增删改）

//先设置一个图片和三个按钮

//注意一旦删除或改变了以后下标就会改变就会失去当前目标的下标

<img src="img/a18.png" class="img0" id="img0"/>

<input type="button" id="id0" value="添加" οnclick="add()"/>
  
  <input type="button" id="id1" value="删除" οnclick="dele()"/>
  <input type="button" id="id2" value="替换" οnclick="tihuan()"/>
  
  <script type="text/javascript">

//点击事件 添加
   function add(){
    
    //创建/找到一个标签
    var img = document.createElement("img");// <img/>
    //设置属性
    img.src="img/a19.png";
    //appendChild() 将标签添加到需要的位置
    var body = document.body;
    body.appendChild(img);
    
   }
   //点击事件删除    注意删除有缺陷
   function dele(){
    
    var img= document.getElementById("img0");
    img.remove();
    var imgs = document.getElementsByTagName("img");
    for (var i = 0;i<imgs.length;i++) {
     var img = imgs[i];
     img.remove();
    }
    
   }
   //替换将一开始展示的图片替换成一个超链接
   function tihuan(){
    
    //创建超链接
    var a = document.createElement("a");
    a.href="#";
    a.innerHTML="超链接";
    //创建纯文本标签
//    var t = document.createTextNode("超链接");
//    a.appendChild(t);
    var img = document.getElementById("img0");
    //找到父标签
    var body = document.body;
    body.replaceChild(a,img);
    
   }
  </script>