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

<!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. java.text.ParseException: Failed to parse date ["未知']

    先把"未知"替换为"" 直接new 出来的Gson 对象是无法解析为""的Date属性的,需要通过GsonBuilder来进行创建 Gson ...

  2. SEVERE: One or more listeners failed to start.

    Full details will be found in the appropriate container log file 错误日志在/home/dela/.IntelliJIdea2017.1 ...

  3. 数据结构14：队列（Queue），“先进先出”的数据结构

    队列是线性表的一种,在操作数据元素时,和栈一样,有自己的规则:使用队列存取数据元素时,数据元素只能从表的一端进入队列,另一端出队列,如图1. 图1 队列示意图 称进入队列的一端为“队尾”:出队列的一端 ...

  4. windows安装redis并设置别名

    最近两天不知什么原因导致win10的redis 无法通过 双击 redis-server.exe 文件启动 redis服务:于是从新安装并且 通过命令行启动服务,并且设置别名,每次方便启动服务 1.下 ...

  5. java：数据结构复习（三）链表队列

    @TOC 和栈一样,队列也是表,但是使用队列的特点是先进先出. 队列模型 队列的基本操作是入队,它是在表的末端插入一个元素,和出队,它是删除在表开头的一个元素 graph LR A[<kbd&g ...

  6. 【Groovy】Spock with Maven

    已经在项目里使用Groovy/Spock做测试框架了,感觉和Maven结合在一起还是挺好用的. 在Maven的pom.xml里引入他们还是挺方便的,第一先要在dependency 里引入 <de ...

  7. Android 远程连接数据库。。。。。

    本来是 6.0.6  换成mysql 5.1.14 驱动ok.... 将方法 放在 new Thread() 解决..... 只能在主线程绘制ui.... 解决办法...子Thread 获取数据后,将 ...

  8. 及时从数据库中取得数据填放进Form表单的多选框中

    #写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...

  9. NMS_非极大值抑制（转）

    NMS(non maximum suppression),中文名非极大值抑制,在很多计算机视觉任务中都有广泛应用,如:边缘检测.目标检测等. 这里主要以人脸检测中的应用为例,来说明NMS,并给出Mat ...

  10. Thread.GetNamedDataSlot(String)

    https://docs.microsoft.com/zh-cn/dotnet/api/system.threading.thread.getnameddataslot?redirectedfrom= ...