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. OMCS使用技巧 －－ 摄像头及其动态能力

    在开发类似视频聊天的应用时,我们经常需要获取摄像头的相关信息:而在进行视频聊天时,我们可能还希望有一些动态的能力.比如,在不中断视频聊天的情况下,切换一个摄像头.或者修改摄像头采集的分辨率或编码质量等 ...

  2. 获取 Windows 任务栏 Rect

    获取当前Windows系统的任务栏尺寸 1: RECT rect; 2: HWND hwndTaskbar = FindWindow(TEXT("Shell_TrayWnd"), ...

  3. A - 小Y上学记——修学分

    A - 小Y上学记——修学分 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) S ...

  4. php随意笔记

    local(局部) global(全局)global 关键词用于访问函数内的全局变量.$GLOBALS[index] 的数组中存储了所有的全局变量.这个数组在函数内也可以访问,并能够用于直接更新全局变 ...

  5. android 录制视频方式

    http://www.cnblogs.com/skyseraph/archive/2012/03/31/2427593.html http://bbs.csdn.net/topics/39088448 ...

  6. Tenured 区并发垃圾回收器CMS介绍

    当使用CMS收集器时,当开始进行收集时,old代的收集过程如下所示:1,首先jvm根据-XX:CMSInitiatingOccupancyFraction,-XX:+UseCMSInitiatingO ...

  7. JavaScript在智能手机上的应用-使用手机GPS定位用户所在城市

    ---------------------------- <script type="text/javascript" language="javascript&q ...

  8. hdu_5701_中位数计数

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5701 题意:不解释 题解:n^2的方法:sum[j]表示当前枚举的数到第j个数形成的区间里当前数偏离中 ...

  9. Storm官方帮助手册翻译(上)

    Storm作为当前最流行的实时计算框架,自Twitter将其开源后就一直备受关注.由于其具有先天的稳定性以及便捷性,目前被许多大公司所采用,国外像雅虎.雅虎日本.Twitter.OOYALA.Spot ...

  10. OpenCV——运用于pixels war游戏

    // The "Square Detector" program. // It loads several images sequentially and tries to fin ...