元素的批量添加和元素的翻转

最新推荐文章于 2024-09-22 11:17:00 发布

weixin_47204963

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量90

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_47204963/article/details/113190502

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量添加元素和元素的翻转</title>
    <style>
        ul {
            padding: 0;
            list-style: none;
            width: 700px;
        }
        li {
            margin: 10px 0;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <button id="addBtn">批量添加li</button>
    <button id="reverseBtn">反转li</button>
    <ul id="box"></ul>

    <script>
         // 定义数组
         var userList = ['刘奶奶', '欧阳奶奶', '姑奶奶', '少奶奶', '二少奶奶', '三少奶奶'];

         //获取相关的元素
        var ulBox = document.querySelector('#box')
        var addBtn = document.querySelector('#addBtn');
        var reverseBtn = document.querySelector('#reverseBtn');

        //点击添加按钮
        addBtn.onclick = function(){
            //创建文档碎片
            var df = document.createDocumentFragment();
            userList.forEach(function(item){
                var liBox = document.createElement('li');
                liBox.innerHTML = item;
                df.appendChild(liBox)
            })  
            //把dg添加到ul中
            ulBox.appendChild(df)
        };

        //实现元素的翻转
        reverseBtn.onclick =function(){
            //创建一个文档碎片
            var dg = document.createDocumentFragment();
            //for循环遍历ul所有子元素
            for(var i = ulBox.children.length-1;i>=0;i--){
                dg.appendChild(ulBox.children[i])
            }
            ulBox.appendChild(dg)
        }

       
    </script>
</body>
</html>