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

<!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>

　　

DOMNodeInserted，DOMNodeRemoved 和监听内容变化插件的更多相关文章

  1. edittext 监听内容变化

    给EditText追加ChangedListener可以监听EditText内容变化的监听 如图是效果图  类似于过滤的一种实现 1  布局也就是一个EditText,当EditText内容发生变化时 ...

  2. 监听内容变化 TextWatcher @功能

    监听多个TextView的内容变化 使用示例 TextWatcherUtils.addTextChangedListener(isAllNotEmpty -> btnLogin.setEnabl ...

  3. node.js监听文件变化

    前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...

  4. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. iOS开发之--为UITextField监听数值变化的三种方法

    项目中有个验证码输入直接验证跳转页面,用的RAC来监听textfield的输入值,如下: @weakify(self); [self.codeView.textField.rac_textSignal ...

  6. Angular.js中使用$watch监听模型变化

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...

  7. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  8. 如何使用NodeJs来监听文件变化

    1.前言 在我们调试修改代码的时候,每修改一次代码,哪怕只是很小的修改,我们都需要手动重新build文件,然后再运行代码,看修改的效果,这样的效率特别低,对于开发者来说简直不能忍. 2.构建自动编译工 ...

  9. android动态注册监听网络变化异常

    在使用广播接收器监听网络变化的时候,在AndroidManifest.xml中加入<user-permission android:name="android.permission.A ...

随机推荐

  1. 《图解HTTP》阅读笔记---第一章网络基础

    第一章.网络基础TCP/IP:----------传输控制协议Transmission Control Protocol / 网络协议Internet Protocol是一种用于Internet(因特 ...

  2. POJ1847 Tram SPFA算法变形

    原题地址:http://poj.org/problem?id=1847 Tram:有轨电车 这题就是构造一个有向无权图,然后每一个点都会有一个开关,这个开关指向他的其中一个出度.当途经这个点的时候,如 ...

  3. linux进程池模型

    static int nchildren;static pid_t* pids;int main(int argc,char**argv){ int listenfd,i; socklen_t add ...

  4. kuangbin专题十六 KMP&&扩展KMP HDU2087 剪花布条

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input输入中含有一些数据,分别是成对出现的花布条和小 ...

  5. [Node.jS]shelljs

    shelljs : https://www.npmjs.org/package/shelljs 要给可以替代Unix下shell脚本的库. require('shelljs/global'); if ...

  6. phpsotrm 设置命名空间

    PHPStorm 添加支持 PSR-4 命名空间前缀设置 许久没有更新博客啦, 太忙了, 七月这最后一天来写点自己在使用 PHPStorm 上的小却很有用的功能吧. PHPStorm 默认是使用 PS ...

  7. spring 事务 配置 多个

    Spring中事务控制相关配置: <bean id="txManager" class="org.springframework.jdbc.datasource.D ...

  8. Python的主要应用领域及应用场景

    参考链接:https://www.cnblogs.com/kaid/p/9016673.html 正文: Python简介 Python(英国发音:/ˈpaɪθən/美国发音:/ˈpaɪθɑːn/), ...

  9. 在Javascript中 声明时用"var"与不用"var"的区别

    http://www.cnblogs.com/juejiangWalter/p/5725220.html var num = 0;function start() {    num = 3;} 只要一 ...

  10. hdu 1556 涂气球 线段树（区间更新~对区间[x,y]更新，求任意节点被更新的次数）

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...