`

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>
    分享到:
    评论

    相关推荐

      javaScript动态添加Li元素的实例

      JavaScript动态添加Li元素是前端开发中常见的一项技术,可以将新的列表项(li元素)动态添加到现有的HTML文档中。在给定的文件内容中,包含了两种主要的技术实现:使用innerHTML和使用createElement。下面将对这两种...

      JS动态增加删除UL节点LI及相关内容示例

      接下来,我们定义了del函数,它用于删除UL中的指定ID的LI元素。这个函数利用了$$函数获取UL元素,然后使用removeChild方法将指定的LI元素从DOM树中移除。 add函数则用于向UL元素中添加新的LI元素。它首先获取UL元素...

      jQuery动态删除CSS UL LI中的一个列表项.rar

      本文将详细讲解如何使用jQuery动态删除CSS中的`UL`和`LI`列表项,以及如何实现列表的自动对齐,从而营造出删除列表项的视觉效果。 首先,`UL`和`LI`是HTML中用于创建无序列表的元素。在CSS中,可以通过选择器来定义...

      jQuery动态添加删除移动列表插件

      总结来说,jQuery动态添加删除移动列表插件通过结合HTML、CSS和JavaScript,提供了用户友好的交互体验,使得用户能够动态地管理列表中的数据。这个插件对于构建数据展示、任务管理或者任何需要动态操作列表的应用...

      JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

      在给出的示例中,JQuery被用来实现在一个无序列表(ul元素)中动态添加和删除列表项(li元素)的功能。以下是利用JQuery实现这些功能的详细知识点: 1. 引入JQuery库:在文档的部分通过标签引入了JQuery的库文件。...

      JavaScript使用ul中li标签实现删除效果

      这个ul元素被赋予了一个ID,即“uid”,这样做是为了在JavaScript中通过这个ID轻松找到这个ul元素。列表项中包含了几个常见的体育运动名称,如篮球、足球和羽毛球。此外,还有一个按钮元素,其点击事件被绑定到了一...

      Jquery和JS获取ul中li标签的实现方法

      通过JQuery,我们还可以轻松为li元素添加或删除class属性,从而改变其样式。例如,下面的代码示例了如何在点击li元素时,切换其背景色,并且改变其父元素ul的样式: ```javascript $(function() { $('.anserdh li'...

      如何动态添加和删除菜单项

      在软件开发中,动态添加和删除菜单项是一项常见的需求,特别是在设计用户界面或者管理系统时。这一功能使得应用程序可以根据用户需求、权限或者特定条件灵活地调整菜单结构。在本篇文章中,我们将深入探讨如何实现这...

      JS实现动态增加和删除li标签行的实例代码

      在JavaScript中,动态地添加和删除DOM元素是常见的需求,特别是在构建交互式用户界面时。本文将通过一个具体的实例,讲解如何使用JavaScript实现动态增加和删除`li`标签行。 首先,我们来看一下如何添加`li`标签。...

      【JavaScript源代码】JavaScript实现留言板添加删除留言.docx

      - **添加删除按钮**:为了便于之后删除留言,还在每个`&lt;li&gt;`元素中添加了一个带有删除功能的`&lt;a&gt;`标签。 ##### 2. 删除留言 删除留言的功能同样关键。当用户点击某条留言旁边的删除按钮时,该留言会被从页面上移除...

      jQuery动态添加删除移动列表插件.zip

      在“jQuery动态添加删除移动列表插件”中,我们可以看到一个功能丰富的实例,它展示了如何利用jQuery来实现列表的动态管理。 首先,`index.html`是项目的主页面,它包含了HTML结构以及引入jQuery库和其他相关脚本的...

      前端经典——vue商城数据动态添加删除demo.rar

      这个“前端经典——vue商城数据动态添加删除demo”旨在通过一个实际的电商应用场景,帮助开发者理解如何在Vue项目中实现数据的动态添加与删除功能。 首先,我们来详细探讨Vue的核心概念——数据绑定。Vue采用MVVM...

      jQuery CSS3动画创建元素列表项添加删除代码

      &lt;title&gt;jQuery CSS3 动画元素添加删除 ul { list-style-type: none; } li { transition: all 0.5s ease; /* CSS3 过渡效果 */ } &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt; 添加 ...

      jquery bootstrap自定义添加删除选项卡代码

      在添加选项卡时,我们动态创建新的`&lt;li&gt;`和`&lt;div&gt;`元素,并使用Bootstrap的`tab()`方法激活新添加的选项卡。在删除选项卡时,我们找到当前活动的选项卡,移除对应的`&lt;li&gt;`和`&lt;div&gt;`元素,并重新激活第一个选项卡或...

      javascript动态修改Li节点值的方法.docx

      在Web开发中,经常需要通过JavaScript来动态地操作DOM元素,比如修改列表项(`&lt;li&gt;`元素)的内容。这种需求常见于交互式的网站应用中,例如允许用户编辑页面上的列表项等场景。本文将详细介绍如何使用JavaScript来...

      jQuery自定义标签添加删除代码.zip

      本资源"jQuery自定义标签添加删除代码.zip"提供了一个简单的解决方案,用于在网页中实现自定义标签的动态添加与删除功能,这在诸如博客、论坛或者内容管理系统中非常常见。 在网页开发中,用户交互性是提升用户体验...

      Treeview js动态菜单

      Treeview JS动态菜单是一种在网页中实现层次结构数据展示的常见技术,广泛应用于网站导航、文件目录展示等场景。JS(JavaScript)作为客户端脚本语言,使得这些菜单能够响应用户的交互,提供动态更新和实时反馈的...

      jQuery添加删除标签代码

      本项目"jQuery添加删除标签代码"聚焦于如何使用jQuery实现自定义的标签添加与删除功能,这对于提升用户体验,特别是在内容管理、博客系统或者任何需要用户输入标签的场景下,具有很高的实用性。 首先,我们来看`...

    Global site tag (gtag.js) - Google Analytics