javascript操作DOM节点（一）

  • 点击按钮后，对文本进行排序后重新显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort list</title>
</head>
<body>
    <ul id="list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>

    <button id="sort-btn">sort</button>

    <script>
       var btn = document.getElementById('sort-btn') ;

       btn.addEventListener('click',sortList, false);


       function sortList() {
         sortKids('list');
       }

       function sortKids(e) {
          if (typeof e === 'string') e = document.getElementById(e);

          var kids = [];
          for (var x = e.firstChild; x != null; x = x.nextSibling) {
            if (x.nodeType == 1) { 
              kids.push(x);
            }
          }

          kids.sort(function(n, m) {
              var nv = n.firstChild;
              var mv = m.firstChild;
              if (nv > mv) return -1;
              return 1;
          });

          for (var i = 0; i < kids.length; i++) {
                e.appendChild(kids[i]);
          }

       }
    </script>
</body>
</html>