父级.appendChild(子节点)

父级.insertBefore(子节点，在谁之前)

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oBtn=document.getElementById('btn1');

    var oUl=document.getElementById('ull');

    var oTxt=document.getElementById('txt1');

    oBtn.onclick=function ()

    {

        var oLi=document.createElement('li');

        var aLi=oUl.getElementsByTagName('li');

        oLi.innerHTML=oTxt.value;

        if(aLi.length>0)

        {

            oUl.insertBefore(oLi,aLi[0]);

        }else

        {

            oUl.appendChild(oLi);

            }

    }

}

</script>

</head>

<body>

<input id="txt1" type="text"/>

<input id="btn1" type="button" value="创建li"/>

<ul id="ull">

</ul>

</body>

父级.removeChild(子节点)

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var aA=document.getElementsByTagName('a');

    var oUl=document.getElementById('ull');

    for(var i=0;i<aA.length;i++)

    {

        aA[i].onclick=function ()

        {

            oUl.removeChild(this.parentNode);

        }

    }

}

</script>

</head>

<body>

<ul id="ull">

    <li>23451253<a href="javascript:;">删除</a></li>

    <li>fwefw<a href="javascript:;">删除</a></li>

    <li>sdgvsdaf<a href="javascript:;">删除</a></li>

    <li>bvdfde<a href="javascript:;">删除</a></li>

    <li>45646<a href="javascript:;">删除</a></li>

</ul>

</body>

文档碎片

文档碎片可以提高DOM操作性能（理论上）   /*现在IE9，火狐浏览器性能都有所提高，影响不大*/

document.createDocumentFragment()

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oUl=document.getElementById('ull');

    var oFrag=document.createDocumentFragment();

    for(var i=0;i<10000;i++)

    {

        var oLi=document.createElement('li');

        oFrag.appendChild(oLi);

    }

    oUl.appendChild(oFrag);

}

</script>

</head>

<body>

<ul id="ull"></ul>

</body>

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

  1. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  3. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  4. js——DOM操作（一）

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  5. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  6. JS DOM操作（五） Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  7. JS DOM操作（二） Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  8. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  9. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  10. js DOM操作练习

    1.有如下html,如果用js获得被选中的option的text描述(非value)<select id="select_id">    <option vlue ...

随机推荐

  1. linux 安装与启动nginx

    linux系统为Centos 64位 一.去http://nginx.org/download/上下载相应的版本下载nginx-1.8.0.tar.gz(注:还有更高版本的). 二.解压 tar -z ...

  2. 1.(1)编写一个接口ShapePara，要求： 接口中的方法： int getArea()：获得图形的面积。int getCircumference()：获得图形的周长 (2)编写一个圆类Circle，要求：圆类Circle实现接口ShapePara。 该类包含有成员变量： radius:public 修饰的double类型radius,表示圆的半径。 x：private修饰的double型变量

    //接口 ShapePara package d922B; public interface ShapePara { int getArea(); int getCircumference(); } ...

  3. 201312月CCF-2，ISBN号码分析

    明天要考CCF啦,偶还是很紧张的.最近看了数据结构,今天才开始上机练习,对,我就是这么懒..废话不多说,我写这篇文章主要是分析CCF编程的小窍门,因为在网上没找到,所以我决定自力更生丰衣足食.!!!! ...

  4. .net dynamic动态加属性

    class Test : System.Dynamic.DynamicObject { public override bool TryGetMember(System.Dynamic.GetMemb ...

  5. Dash：程序员的好帮手

    Dash 关于Dash是什么.有哪些功能以及该怎么使用,我想直接引用咖啡 生活 美女蛇,这位小伙伴整理的很详细,我这里只说一下Dash的破解方法. 破解 破解补丁下载:Dash3.x_Cracked ...

  6. Oracle数据库插入数据出错：ORA-06550

    wpf应用调用oracle的存储过程,出错“ORA-06550:参数个数或参数类型出错”,如下图: 反复检查,存储过程的参数个数和参数类型都没错,觉得非常蹊跷.最后终于解决, 原因是当参数的值为nul ...

  7. 肢体语言心理学+FBI阅人术(行为心理学） 用最短的时间了解一个人

    肢体语言心理学      如何从站姿判断人 每个人都有自己习惯的站立姿势.美国夏威夷大学心理学家指出,不同的站姿可以显示出一个人的性格特征. 站立时习惯把双手插入裤袋的人:城府较深,不轻易向人表露内心 ...

  8. check2

    //文件check.js //将方法句柄赋值给变量$,简化document.getElementById(); var $ = document.getElementById; //定义模拟类(定义C ...

  9. 【第二篇】学习 android 事件总线androidEventbus之异步事件的传递

    1,不同Activity直接发送Ansy的事件,以及其他任何事件,必须通过 postSticky方式来进行事件的传递,而不能通过post的形式来进行传递:EventBus.getDefault().p ...

  10. DOM操作-引用同级的元素

    代码: ———————————————————————————————— <script type="text/javascript">            //获取 ...