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

<!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. CSS之引入样式

    CSS引入样式 内部样式 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <style type=&quo ...

  2. [BZOJ3337] ORZJRY I --块状链表大毒瘤

    link 题目大意:维护一个序列 支持: 1.单点插入 2.单点删除 3.区间翻转 4.区间旋转 5.区间加 6.区间赋值 7.询问区间和 8.询问区间极差 9.询问区间与给定某个数差值绝对值的最小值 ...

  3. 「洛谷P3768」简单的数学题 莫比乌斯反演+杜教筛

    题目链接 简单的数学题 题目描述 输入一个整数n和一个整数p,你需要求出 \[\sum_{i=1}^n\sum_{j=1}^n (i\cdot j\cdot gcd(i,j))\ mod\ p\]  ...

  4. linux 基本概念

    Linux把物理内存分为了固定统一大小的块,称为page(页框),一般为4KB. Linux采用4KB页框大小作为标准的物理内存分配单元,内核用数据结构page描述一个页框的状态信息,其实页是进程的概 ...

  5. python统计字符串中字符个数

    str = "xxx" result = {} for i in set(str):#set将字符串转为集合对象,用于去重,减少计算量 result[i] = str.count( ...

  6. mysql 备份时间 %date~0,4%和 %time~0,2%等用法详解

    比如在windowscmd命令行窗口执行date命令后这个环境变量的值为 当前日期:2014-09-01 星期六 或2014/09/01 周六 那么如下的各个操作的意义如下:%date:~0,4% 表 ...

  7. ssh连接异常

    在平时工作中,有时候需要SSH登陆到别的Linux主机上去,但有时候SSH登陆会被禁止,并弹出如下类似提示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  8. Android MVP模式实现组件和业务逻辑分离

    1,Activity代码展示,只需要一下3行重要代码即可完成任何复杂的逻辑 /** * 登录界面 * * @author lipanquan */public class LoginActivity ...

  9. Dev GridView RowCellClick事件与MouseDown事件

    GridView处于可编辑状态,左键点击默认为“进入编辑”. 将GridView的OptionsColumn.AllowEdit设置为false后左键可触发RowCellClick.但有时候,既希望G ...

  10. Photoshop入门教程（一）：文本新建与概念解析

    写在开头 <Photoshop实用入门>系列教程可能对于一点都没有接触过Photoshop的人来说不太容易接受,因为本教程并没有细致到教你如何使用画笔工具等一系列很基础的东西,有些地方的讲 ...