JS 动态添加元素与删除元素

最新推荐文章于 2022-05-19 08:43:31 发布

BowenXu11

最新推荐文章于 2022-05-19 08:43:31 发布

阅读量374

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/BowenXu11/article/details/105357209

版权

javascript 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>动态增加元素与删除</title>
    <style type="text/css">
        div {
            width:300px;
            height:300px;
            border:1px;
            border-color:red;
            border-style:dashed;
        
        }

    </style>
    <script type="text/javascript">


        window.onload = function () {
            //1.动态增加元素
            this.document.getElementById('btnAdd').onclick = function () {
                var button1 = document.createElement('input');
                button1.type = 'button';
                button1.value = 'zcv.net.cn';
                document.getElementById('dv1').appendChild(button1);
            };
            //2.动态移除所有元素
            this.document.getElementById('btnRemove').onclick = function () {
                var dv1 = document.getElementById('dv1');//获取dv1元素
                while (dv1.firstChild) {
                    document.removeChild(dv1.firstChild);//判断如果第一个子元素不为空，则删除第一个子元素。
                }
            };
        };

    </script>
</head>
<body>
    <input type="button" name="name" value="增加元素" id="btnAdd"/>
    <input type="button" name="name" value="移除所有元素" id="btnRemove" />
    <div id="dv1"></div>
</body>
</html>

BowenXu11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 动态添加元素与删除元素

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>动态增加元素与删除</title> <style type="text/css...
复制链接

扫一扫

专栏目录