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. delphi中ShellExecute使用详解

    http://jingyan.baidu.com/article/ae97a646ae00a2bbfd461d38.html 百度的讲解 http://www.cnblogs.com/del/arch ...

  2. C++ 类中的引用成员变量初始化

    刚遇到一个问题,需要的类成员为指针的引用,而引用不能在构造函数里初始化,必须在初始化列表中进行初始化,并且需要该引用在构造函数中的形参必须为引用形式 1: class ThreadParam { 2: ...

  3. TreeSize Free 查看文件夹大小 v2.3.3 汉化版

    <b>软件名称: <a href="http://www.bkill.com/download/30740.html"><font color=&qu ...

  4. 使用block函数的基本形式

    以前从未接触过block函数. 如果在.h头文件中定义的形式如下的话: @property (nonatomic, copy) void(^fontValueChangedBlock)(void); ...

  5. Zookeeper 启动错误

    启动后日志如下 : 2016-09-14 05:51:19,449 [myid:1] - INFO [QuorumPeer[myid=1]/0:0:0:0:0:0:0:0:2181:FastLeade ...

  6. 设计模式4 外观模式 FACADE

    一个外观是一个类,其提供的功能介于工具箱的功能和完整系统的功能之间,并为一个包或者一个子系统中的类提供了简化的使用方式.

  7. 常见的jquery一些效果

    1.CSS渐变:background: linear-gradient(to bottom right, #999 , #eee);

  8. OC-之NSDate、万年历

    万年历计算星期-基姆拉尔森公式 #include /* * 基姆拉尔森计算公式* W= (d+2*m+3*(m+1)/5+y+y/4-y/100+y/400) mod 7*/int week(int ...

  9. js实现url链接encode加密

    function urlencode(clearString) { var output = ''; var x = 0; clearString = utf16to8(clearString.toS ...

  10. .NET下,关于文件夹权限设置的小细节

    InheritanceFlags 指定哪些接受权限继承 InheritanceFlags.ContainerInherit 下级文件夹要继承权限. InheritanceFlags.None 下级文件 ...