1.创建子元素oLi=document.creatElement('li')

2.将元素附给父级元素oUl.appendChild(oLi)

3.将元素插入到父级元素里的第一位子元素之前oUl.insertBefore(oLi,aLi[0])

if(aLi.length>0)用这个,反之else用oUl.appendChild(oLi),否则会出错

4.oUl.removeChild(this.parentNode)       //删除的子节点为当前事件的父节点

5.文档碎片应用,相当于购物袋

var oFrag=document.creatDocumentFragment();

oFrag.appendChild(oLi);

oUl.appendChild(oFrag);

12 DOM操作应用的更多相关文章

  1. 12 DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  2. 摆脱DOM操作,从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  3. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  4. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  5. js获取节点的DOM操作

    一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...

  6. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  7. 第三章 jQuery中的DOM操作

    DOM(Document Object Model)文档对象模型,每张网页都能用DOM表示出来,每一份DOM都能看成一颗DOM树. jQuery继承了JavaScript对DOM对象操作的特性,使开发 ...

  8. javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  9. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

随机推荐

  1. vector draw 试用期结束的 激活方法

     [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Licenses\DBEA4D42-0745-428e-B17A-A5B6CA3AB34B] 把这个注冊表给删 了

  2. 设计模式-(6)适配器 (swift版)

    用来解决接口适配问题的三种模式:适配器模式,桥接模式,外观模式. 一,概念 适配器模式,将一个类的结构转换成用户希望的另一个接口,使得原本接口不兼容的类能在一起工作.换句话说,适配器模式就是链接两种不 ...

  3. mysql04--存储过程

    过程:若干语句,调用时执行封装的体.没有返回值的函数. 函数:是一个有返回值的过程 存储过程:把若干条sql封装起来,起个名字(过程),并存储在数据库中. 也有不存储的过程,匿名过程,用完就扔(mys ...

  4. ubuntu安装ibus-goolepinyin通用方法

    1:获取安装包 http://code.google.com/p/libgooglepinyin/downloads/list

  5. YTU 2953: A代码填充--学画画

    2953: A代码填充--学画画 时间限制: 1 Sec  内存限制: 128 MB 提交: 62  解决: 52 题目描述 最近小平迷上了画画,经过琨姐的指导,他学会了RGB色彩的混合方法.对于两种 ...

  6. python利用决策树进行特征选择

    python利用决策树进行特征选择(注释部分为绘图功能),最后输出特征排序: import numpy as np import tflearn from tflearn.layers.core im ...

  7. UICollectionView基础/UICollectionViewCell的四种创建方式

    前言 UICollectionViewCell的四种创建方式:http://blog.csdn.net/ZC_Huang/article/details/52002302 这个控件,看起来与UITab ...

  8. bzoj1101

    1101: [POI2007]Zap Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2319  Solved: 936[Submit][Status] ...

  9. js方式的页面跳转

    window.location.href="login.html";   (直接function里面执行 跳转)

  10. linux中的C里面使用pthread_mutex_t锁(转载)

    转自:http://blog.csdn.net/w397090770/article/details/7264315 linux下为了多线程同步,通常用到锁的概念. posix下抽象了一个锁类型的结构 ...