另一种删除层中元素的方法(innerHTML赋值为空字符串)

最新推荐文章于 2022-02-27 15:10:47 发布

原创最新推荐文章于 2022-02-27 15:10:47 发布 · 661 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#另一种删除层中元素的方法(innerHTML赋值为空字符串)

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍了两种在HTML中删除指定层内元素的有效方法：一种是通过while循环遍历并移除子节点，另一种则是直接设置innerHTML为空字符串，实现快速清空元素内容。这两种方法各有优劣，适用于不同场景。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        #div1 {
        width:300px;
        height:300px;
        border:1px solid red;
        }
    </style>
    <button id="btn1">第一中删除层中元素的方法</button>
    <button id="btn2">第二种删除层中元素的方法</button>
    <div id="div1">
        <button>按钮1</button>
        <button>按钮1</button>
        <button>按钮1</button>
        <button>按钮1</button>
        <button>按钮1</button>
        <button>按钮1</button>
        <button>按钮1</button>
        <button>按钮1</button>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            //第一种删除元素的方法
            document.getElementById('btn1').onclick = function () {
                var div1Obj = document.getElementById('div1');
                while(div1Obj.firstChild){
                    div1Obj.firstChild.remove();
                };
            };
            //第二种删除元素的方法
            document.getElementById('btn2').onclick = function () {
                document.getElementById('div1').innerHTML = '';
            };
        };
    </script>
</body>
</html>