javascript--DOM添加删除Element对象---苹果树
昵称
密码

javascript--DOM添加删除Element对象---苹果树

fl0919
2021-05-10 / 0 评论 / 6 阅读 / 正在检测是否收录...
/

效果

;

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                box-sizing: border-box;
                
            }

            .outer {
                
                background-repeat: no-repeat;
            
                margin-left: 100px;
                margin-top: 100px;
                width: 265px;
                height: 285px;
            }

            .allapple {
                width: 20%;
                height: 20%;
            }
        </style>
    </head>

    <body>

        <div class="outer">

        </div>

        <input type="button" value="添加苹果" onclick="addapple()">;
        <input type="button" value="删除苹果" onclick="deleChilddiv()">
    </body>
    <script type="text/javascript">
        function addapple() {
            //通过类名获得父元素
            var divFu = document.getElementsByClassName("outer")[0];
            //创建img元素
            var imgapple = document.createElement("img");
            //设置图片路径
            imgapple.src = "https://cdn.jsdelivr.net/gh/lfl0919/img/images/apple.png"
            //设置元素的类属性
            imgapple.setAttribute("class", "allapple");
            //父元素添加子元素
            divFu.appendChild(imgapple);
        }

        function deleChilddiv() {
            //通过类名获得父元素
            var divFu = document.getElementsByClassName("outer")[0];
            //通过类名获得图片元素
            var apples = document.getElementsByClassName("allapple");
            //删除子元素
            divFu.removeChild(apples[apples.length - 1]);

        }
    </script>
    
    
    
</html>
0

评论

博主关闭了所有页面的评论