DOMNodeInserted，DOMNodeRemoved 和监听内容变化插件

最新推荐文章于 2022-12-09 22:56:27 发布

会做饭的技术男

最新推荐文章于 2022-12-09 22:56:27 发布

阅读量383

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjbhbchb0hab.html

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

元素的增加删除及事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        点击添加li
    </div>
    <ul>
        <li>kkkk</li>
    </ul>
    <button>
        点击删除节点
    </button>
</body>
<script>
    var ul = document.getElementsByTagName('ul')[0]
    document.getElementsByTagName('div')[0].onclick = function () {//添加元素
        var li=document.createElement('li');
        var t=document.createTextNode('666')
        li.appendChild(t)

        ul.appendChild(li)
    }
    document.getElementsByTagName('button')[0].onclick = function () {//删除元素
        ul.removeChild(ul.lastElementChild)

       
    }

    ul.addEventListener('DOMNodeInserted',function () {
       console.log(ul.childElementCount)
        
    })
    ul.addEventListener('DOMNodeRemoved',function () {
       console.log(ul.childElementCount)
        
    })

</script>
</html>

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOMNodeInserted，DOMNodeRemoved 和监听内容变化插件

元素的增加删除及事件监听<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
复制链接

扫一扫