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

<!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. CentOS7l联网

    原文:https://blog.csdn.net/nothing2017/article/details/61420767 步骤: 1.以root管理员身份登录系统,输入   --->(ls / ...

  2. Es6中Map对象和Set对象的介绍及应用

    map和set的方法,工作中有使用到,所以学习一下: Map 对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. var myMap = new Map(); myMa ...

  3. java背包的数组实现，链表实现

    数组实现 package base.structure; import java.lang.reflect.Array; import java.util.Iterator; /** * @progr ...

  4. C语言中变量、全局变量与变量的作用域

    什么是变量: 变量常量都是表征数据的一种形式:常量用来表示数据的值: 变量不仅可以用来表示数据的值:还可以用来存放数据:因为变量对应着一定的内存单元: 变量和常量必须先定义后使用. 变量名和常量名都是 ...

  5. Go语言基础之10--面向对象编程2之方法

    一.方法的定义 之前我们学习了结构体(struct),其仅仅是对数据的封装,并没有行为方法,还不是一个完全的面向对象的思路,所以现在我们来学习在结构体的基础上如何去定义一个方法.结构体(类)+方法=完 ...

  6. 协议 + socket import 和 form xx import *的区别 028

    一 . 网络通信协议(了解) 1 . osi 七层协议 (最好记住 面试会问) 应表会传网数物(应用层 表示层 会话层 传输层 网络层 数据链路层 物理层) 2 .tcp/ip五层 或 tcp/ip四 ...

  7. Wireshark抓取TCP包分析

    介绍 本篇文章是使用wireshrak对某个https请求的tcp包进行分析. 目的 通过抓包实际分析了解tcp包. 准备工作 在我自己机子上安装的是wireshark2.2.6版本,随机查找了某个T ...

  8. gitlab 邮件配置

    vim /etc/gitlab/gitlab.rb gitlab_rails['smtp_enable'] = true gitlab_rails['smtp_address'] = "sm ...

  9. 为什么 c++中函数模板和类模板的 声明与定义需要放到一起？

    将模板的声明与定义写在一起实在很不优雅.尝试用“传统”方法,及在.h文件里声明,在.cpp文件里定义, 然后在main函数里包含.h头文件,这样会报链接错误.why!!!!!!!!!!!!! 这是因为 ...

  10. $('#').formValidation校验网址

    $('#addCarouselInfoForm').formValidation({ message: '格式不正确', //不忽略隐藏域验证 excluded: [], icon: { valid: ...