日期:2014-05-16  浏览次数:20342 次

js动态添加与删除ul中的li
<ul id="s">
  • 11111111111111111
  • 22222222222222222
  • 33333333333333333
  • 44444444444444444
  • 55555555555555555

  • </ul>

    <input type="button" value="删除第2行" onclick="del(2);">
    <input type="button" value="删除第3行" onclick="del(3);">
    <input type="button" value="添加到最后行" onclick="add(-1,'最后行');">
    <input type="button" value="添加到第二行" onclick="add(2,'第二行');">
    <script>
    function del(n)
    {
      var s=document.getElementById('s');
      var t=s.childNodes.length;
      for (var i=0;i<t;i++)
      {
       if (i==n-1)
       {
        s.removeChild(s.childNodes[i]);
       }
      }
    }
    function add(n,txt)
    {
      var s=document.getElementById('s');
      var t=s.childNodes.length;
      var li= document.createElement("li");
      li.innerHTML=txt;
      for (var i=0;i<t;i++)
      {
       if (n==-1)
       {
        s.appendChild(li);
       }
       else if (i==n-1)
       {
        s.insertBefore(li,s.childNodes[i]);
       }
      }
    }
    </script>