appendChild   1.先把元素从原有的父级上删除    2.添加到新的父级

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

<script>

window.onload=function ()

{

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

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

    oBtn.onclick=function ()

    {

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

        var arr=[];

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

        {

            arr[i]=aLi[i];

        }

        arr.sort(function(li1,li2){

                          var n1=parseInt(li1.innerHTML);

                          var n2=parseInt(li2.innerHTML);

                          return n1-n2;

                          });

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

        {

            oUl.appendChild(arr[i]);

        }

    }

}

</script>

</head>

<body>

<input id="btn1" type="button" value="排序"/>

<ul id="ul1">

   <li>23</li>

   <li>9</li>

   <li>99</li>

   <li>82</li>

   <li>34</li>

</ul>

</body>

排序后：

例二

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

<style>

#ul1{background:green;}

#ul2{background:yellow;}

</style>

<script>

window.onload=function ()

{

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

    var oUl1=document.getElementById('ul1');

    var oUl2=document.getElementById('ul2');

    oBtn.onclick=function ()

    {

        var oLi=oUl1.children[0];

        oUl2.appendChild(oLi);

    }

}

</script>

</head>

<body>

<ul id="ul1">

   <li>1</li>

   <li>2</li>

   <li>3</li>

   <li>4</li>

</ul>

<input id="btn1" type="button" value="移动"/>

<ul id="ul2">

</ul>

</body>

表格排序

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

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

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

    oBtn.onclick=function ()

    {

        var arr=[];

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            arr[i]=oTab.tBodies[0].rows[i];

        }

        arr.sort(function(tr1,tr2){

                          var n1=parseInt(tr1.cells[0].innerHTML);

                          var n2=parseInt(tr2.cells[0].innerHTML);

                          return n1-n2;

                          });

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

        {

            oTab.tBodies[0].appendChild(arr[i]);

        }

    };

};

</script>

</head>

<body>

<input id="btn1" type="button" value="排序"/>

<table id="tab1" border="1" width="500">

    <thead>

       <td>ID</td>

       <td>姓名</td>

       <td>年龄</td>

       <td>操作</td>

    </thead>

    <tbody>

       <tr>

        <td>2</td>

        <td>张三</td>

        <td>24</td>

        <td></td>

       </tr>

       <tr>

        <td>1</td>

        <td>blue</td>

        <td>23</td>

        <td></td>

       </tr>

       <tr>

        <td>5</td>

        <td>李六</td>

        <td>27</td>

        <td></td>

       </tr>

       <tr>

        <td>4</td>

        <td>王五</td>

        <td>26</td>

        <td></td>

       </tr>

       <tr>

        <td>3</td>

        <td>李四</td>

        <td>25</td>

        <td></td>

       </tr>

    </tbody>

</table>

</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基础 1.节点(node)层次 Document--最顶层的节点,所有的其他节点都是附属于它的. DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现 ...

  5. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  6. JS DOM操作（三） Window.docunment对象——操作属性

    属性:是对象的性质与对象之间关系的统称.HTML中标签可以拥有属性,属性为 HTML 元素提供附加信. 属性总是以名称/值对的形式出现,比如:name="value". 属性值始终 ...

  7. 第七节 DOM操作应用-高级

    表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...

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

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

  9. js——DOM操作（一）

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

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

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

随机推荐

  1. ESFramework ——可堪重任的网络通信框架

    ESFramework是一套性能卓越.稳定可靠.强大易用的跨平台通信框架,支持应用服务器集群.其内置了消息的收发与自定义处理(支持同步/异步模型).消息广播.P2P通道.文件传送(支持断点续传).心跳 ...

  2. python 进制 转换

    测试用的python源码 ''''' Created on 2014年8月21日 @author: lenovo ''' import binascii import struct def examp ...

  3. python--sum函数--sum(axis=1)

    平时用的sum应该是默认的axis=0 就是普通的相加,当加入axis=1以后就是将一个矩阵的每一行向量相加. 例如: >>>import numpy as np >>& ...

  4. SELinux Policy Macros

    参考:http://selinuxproject.org/page/NB_RefPolicy Directory Macros macro expansion getattr_dir_perms ge ...

  5. caffe+NVIDIA安装+CUDA-7.5+ubuntu14.04（显卡GTX1080）

    首先强调,我们实验室的机器是3.3w的机器,老板专门买来给我们搞深度学习,其中显卡是NVIDIA GeForce  GTX1080(最近新出的,装了两块),cpu是intel i7处理器3.3Ghz, ...

  6. check2

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

  7. CRC的校验原理

    一.基本原理 CRC检验原理实际上就是在一个p位二进制数据序列之后附加一个r位二进制检验码(序列),从而构成一个总长为n＝p+r位的二进制序列:附加在数据序列之后的这个检验码与数据序列的内容之间存在着 ...

  8. android代码格式化方法小结

    转载:http://blog.csdn.net/androidzhaoxiaogang/article/details/7692526 Download the android-formatting. ...

  9. ThinkPad 禁用 触摸板

    执行 xinput wowk@wowk:~$ xinput ⎡ Virtual core pointer id=2 [master pointer (3)] ⎜ ↳ Virtual core XTES ...

  10. pig、hive以及hbase的作用

    Pig Pig是一种数据流语言,用来快速轻松的处理巨大的数据.Pig包含两个部分:Pig Interface,Pig Latin.Pig可以非常方便的处理HDFS和HBase的数据,和Hive一样,P ...