js添加、删除 、替换节点

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>

 注：替换部分只是其中一个方法，通过修改元素属性替换，还可以通过替换节点方式替换。