js操作dom

11562053

发布于
2019-06-11

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

一个父节点parent下面有很多的子节点child。并且这些子节点是不断增加的。这样就会造成dom元素增多，使网页变得卡顿。所以我想让parent只保留最新的20条子节点child，每次增加就把之前的删除掉。大家有什么好的解决方案吗？

javascript

html5

阅读 2.5k

5 个回答

建议使用框架 vue 或者 react

li_shifeng

6811616

发布于
2019-06-11

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<p id="demo">点击按钮来删除列表中的首个项目。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>

</body>
</html>

Justin

1.4k41232

发布于
2019-06-11

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
    <script>
        var ul = document.querySelector('ul');
        var index = 1;
        setInterval(function () {
            ul.insertAdjacentHTML('beforeend', `<li>${index++}</li>`);
            if (ul.getElementsByTagName('li').length > 20) {
                ul.removeChild(ul.children[0]);
            }
        }, 500);
    </script>
</body>
</html>