首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

单击克隆具有不同li类的li

是指在前端开发中,通过点击事件来复制具有不同类名的列表项(li)。

在前端开发中,我们经常需要动态地生成多个相似的元素,例如列表项。而且这些元素可能具有不同的样式或功能。为了实现这个需求,我们可以使用JavaScript来监听点击事件,并在点击时克隆(li.cloneNode)已有的列表项。

下面是一个示例代码:

HTML:

代码语言:txt
复制
<ul id="list">
  <li class="item">列表项1</li>
  <li class="item">列表项2</li>
  <li class="item">列表项3</li>
</ul>
<button id="cloneBtn">克隆</button>

JavaScript:

代码语言:txt
复制
var cloneBtn = document.getElementById('cloneBtn');
var list = document.getElementById('list');

cloneBtn.addEventListener('click', function() {
  var items = list.getElementsByClassName('item');
  var lastItem = items[items.length - 1];
  var clonedItem = lastItem.cloneNode(true);
  
  // 修改克隆项的类名
  clonedItem.className = 'item new-item';
  
  list.appendChild(clonedItem);
});

在上述代码中,我们首先通过getElementById获取到克隆按钮(cloneBtn)和列表(list)的DOM元素。然后,我们给克隆按钮添加了一个点击事件监听器。当点击按钮时,我们首先获取到所有具有类名为'item'的列表项,然后克隆最后一个列表项,并修改其类名为'item new-item'。最后,我们将克隆项添加到列表中。

这样,每次点击克隆按钮,就会在列表的末尾添加一个具有不同类名的克隆项。

这个功能在一些需要动态添加或删除列表项的场景中非常有用,例如购物车中的商品列表、待办事项列表等。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各类业务需求。产品介绍链接
  • 腾讯云云数据库 MySQL 版:高性能、可扩展的关系型数据库服务。产品介绍链接
  • 腾讯云对象存储(COS):安全、稳定、高扩展性的云端存储服务。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务和解决方案。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联设备。产品介绍链接
  • 腾讯云移动开发平台(MTP):提供一站式移动应用开发、测试、分发、运营的云端服务。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端分享|Html+CSS+JS 实现轮播切换

/title> 看Aion如何使用JavaScript实现轮播图展示二 安装Http-server模块在IDE编辑器中,单击下方终端...http-server4.在IDE编辑器中,单击下方预览,输入对应端口号8080,按回车(Enter)键。返回如下页面,您可看到您创建index.html页面。...它是根据ul li图片张数来决定 ,所以 我们要先在js中给div中ol中添加li(即小圆点),并且给ul中图片几li添加索引值以便下一步操作。...//克隆ol中第一个li放到最后一个ulObj.appendChild(ulObj.children[0].cloneNode(true));2.4在标签中添加如下js代码,实现点击左右按钮实现轮播...背景颜色 olObj.children[0].className = "current"; //克隆ol中第一个li放到最后一个 ulObj.appendChild(ulObj.children

34210

jQuery_T2_DOM操作

DOM操作内容 jQueryDOM DOM转jQuery对象  DOM样式添加 jQuery元素属性设置 toggle切换 ​编辑html()与text()区别 DOM添加图片 纯dom添加元素 克隆元素...根据HTML标签在刻画网页特征时语义功能,将DOM树结点分为6种类别:标题(TITLE)、正文类(CONTENT)、视觉(VISION)、分块(BLOCK)、超链(LINK)和其他(OTHER...),不同结点对Web信息提取重要度不同。...超链(LINK):指包含超链接标签类别,如〈a〉。 其他(OTHER):指不属于以上5种类别的标签类型。...jQueryDOM 使用 jQuery 选择器选择页面中元素,是为了生成 jQuery 对象,jQuery 对象具有特有的方法和属性,完全能够实现传统 DOM 对象所有功能 使用jQuery操作元素

7.8K20
  • 伸缩侧边栏

    效果图: 展开 收起 实现原理: 展开:单击图标或空白展开主菜单栏,单击图标额外展开子菜单栏 收起:单击空白收起主菜单栏和所有子菜单栏 通过js改变元素,并在样式表中定义不同样式,实现样式改变...主菜单为.long时,width:25rem,为.short时,width:7.5rem 子菜单为.hide时,height:0,为.show时,heigth由js根据子元素数量计算 源代码...document.getElementById('list'); let in_ul = document.getElementsByClassName('in_ul'); /*改变主菜单...in_ul){ i.className = "hide in_ul"; i.style.height = 0; } } } /*单击图标.../*获取子菜单下子元素个数(li标签)*/ let ll = in_ul.children.length; /*获取主菜单*/ let out_ul = document.getElementById

    30510

    「Web编程API」- 03

    } } } 1.1.3 复制(克隆)节点 1111 2 3</li...DOM事件流 html中标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div父元素,甚至整个页面。...那么是先执行父元素单击事件,还是先执行div单击事件 ???...比如:我们给页面中一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 当时2大浏览器霸主谁也不服谁!...常情况下terget 和 this是一致,但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行),这时候this指向是父元素,因为它是绑定事件元素对象

    1.4K50

    前端成神之路-WebAPIs03

    } } } } 1.1.3 复制(克隆)节点 ?...DOM事件流 html中标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div父元素,甚至整个页面。...那么是先执行父元素单击事件,还是先执行div单击事件 ??? ?...比如:我们给页面中一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ? 当时2大浏览器霸主谁也不服谁!...常情况下terget 和 this是一致, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象

    3K20

    原生 JS DOM 常用操作大全

    与前面介绍不同 盒子1 盒子2 首页 产品 querySelectorAll (选择器) 可以是任意选择器 例如:id、标签名、名参数: 可以是 id 、名、标签 选择器返回...) 具有兼容问题 ie9才支持parentNode.children[0] (没有兼容性问题,并且返回第一个子元素) 我是li 我是li 我是li 我是li 兄弟节点 node.nexElementSibling...,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行)这时候 this 指向是元素,因为 this 使终指向是事件绑定元素 target 指向是子元素 ,因为...( child ) 方法 在父级节点删除一个子节点,返回删除节点 复制(克隆)节点 node.cloneNode() //返回调用 该方法节点一个副本,也称为克隆节点/拷贝节点如果括号参数为空或者为...false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点 DOM核心总结 DOM操作,我们主要针对于元素操作。

    10210

    (长文预警) 你还在烦工作中碰到拖拽问题?一个框架jiejue

    delay设置此选项后,即使手指不动,某些具有非常灵敏触摸显示屏手机(如三星Galaxy S8)也会触发不需要触摸移动事件,从而导致排序不会触发。...最重要是,Fallback始终会生成该DOM元素副本,并附加fallbackClass在选项中定义。此行为控制此“拖动”元素外观 <!...指定以像素为单位鼠标在被视为拖动之前应移动距离。如果项目也可以单击,例如在链接列表中,则很有用。 当用户在可排序元素内单击时,在按下和松开之间,您手通常会略微移动。...默认情况下,此选项为true,这意味着Sortable在应该被隐藏时将从DOM中删除克隆元素 emptyInsertThreshold 选项 拖动时鼠标必须与一个空可排序对象之间距离(以像素为单位...当您具有带有专用滚动功能自定义滚动条时很有用。'

    7.1K10

    利用easyui实现 菜单节点和选项卡联动效果

    具有子菜单一级菜单是无需创建选项卡 [2] 功能实现 ① 给树状菜单节点增加单击事件 ② 在树节点单击事件中校验当前点击是资源跳转菜单还是一级菜单 ③ 在树节点单击事件中增加新增选项卡逻辑...$("#myTree").tree({ onClick:function (node) { //判断当前点击节点是否具有子节点...,就实现了联动,就实现了效果图 菜单实现是使用easyui树,UI标签上面写class="easyui-tree"就可以展现菜单形状了,UI里面的li就是子菜单 我们利用js $(function...我们在控制台输出node,就可以看到,点击不同菜单,输出就不一样。如果一级菜单下有二级菜单,输出node里面就有属性chridren.。我们可以根据有没有这个属性判断是不是一级菜单。...onClick:function (node) { //判断当前点击节点是否具有子节点 console.log(node

    1.5K20

    网页轮播图案例

    ('li') 插入节点ol.appendChild(li) 小圆圈排他思想 点击当前小圆圈,就添加current 其余小圆圈就移除这个current 点击小圆圈滚动图片 此时用到animate动画函数...图片无缝滚动原理 把ul第一个li复制一份,放到ul 最后面 当图片滚动到克隆最后一张图片时,让ul快速、 不做动画跳到最左侧: left 为0 同时num赋值为0,可以从新开 始滚动图片了 克隆第一张图片...克隆ul第一个li cloneNode()加true 深克隆复制里面的子节点 false 浅克隆 添加到ul最后面appendChild() 点击右侧按钮,小圆圈跟随变化 最简单做法是再声明一个变量...[i].className = '';           }            // 留下我自己 当前li 设置current 名            this.className...      }        // 留下当前小圆圈current名        ol.children[circle].className = 'current';   }

    5.5K21

    网页轮播图案例

    创建节点createElement('li') 插入节点ol.appendChild(li) 小圆圈排他思想 点击当前小圆圈,就添加current 其余小圆圈就移除这个current...图片无缝滚动原理 把ul第一个li复制一份,放到ul 最后面 当图片滚动到克隆最后一张图片时,让ul快速、 不做动画跳到最左侧: left 为0 同时num赋值为0,可以从新开...始滚动图片了 克隆第一张图片 克隆ul第一个li cloneNode()加true 深克隆复制里面的子节点 false 浅克隆 添加到ul最后面appendChild() 点击右侧按钮...[i].className = '';           }            // 留下我自己 当前li 设置current 名            this.className...      }        // 留下当前小圆圈current名        ol.children[circle].className = 'current';   }

    1.4K30

    网页轮播图案例

    ol里面) ⑤ 创建节点 createElement(‘li’) ⑥ 插入节点 ol. appendChild(li) ⑦ 第一个小圆圈需要添加 current 案例分析3. ① 小圆圈排他思想...② 点击当前小圆圈,就添加current ③ 其余小圆圈就移除这个current ④ 注意: 我们在刚才生成小圆圈同时,就可以直接绑定这个点击事件了。...③ 图片无缝滚动原理 ④ 把ul 第一个li 复制一份,放到ul 最后面 ⑤ 当图片滚动到克隆最后一张图片时, 让ul 快速、不做动画跳到最左侧: left 为0 ⑥ 同时num 赋值为0,...可以从新开始滚动图片了 案例分析6. ① 克隆第一张图片 ② 克隆ul 第一个li cloneNode() 加true 深克隆 复制里面的子节点 false 浅克隆 ③ 添加到 ul...""; } // 留下我自己 当前li 设置select名 this.className = "select"; // 5.

    2.4K10

    移动端轮播图效果实现

    */ margin-left:-100%;/*默认展示第一张图片而不是克隆最后一张图片*/ } .focus ul li{ width: 20% ;/*防止图片变大5倍*/ float...ul.style.transform = 'translateX('+translateX+'px)' } }) }) 当用户在第一张进行向右拖动时,用户看到克隆最后一张...该属性还可用于在元素添加,移除,切换 CSS,有如下方法 element.classList.add('名') 追加名(不用加点) element.classList.remove(’名‘) 移除名...element.classList.toggle('名') 切换名(原来有这个名则取消否则添加) 代码如下 ... // 小圆点跟随变化 //将ol里面的li带有current名元素选择出来去掉名...touchend 手指离开时 根据滑动距离分不同情况 代码如下 //触摸元素获取手指初始坐标 var startX = 0; var moveX = 0; var flag

    1.6K10

    JavaScript案例:轮播图

    ('li') 插入节点 ol.appendChild(li) 第一个小圆圈需要添加 current 小圆圈排他思想 点击当前小圆圈,就添加 current 其余小圆圈就移除这个 current...当图片滚动到克隆最后一张图片时,让ul快速、不做动画跳到最左侧:left为0 同时 num赋值为0,可以从新开始滚动图片了 克隆第一张图片 克隆 ul第一个 li cloneNode() 加 true...[i].className = ''; } // 留下我自己 当前li 设置current 名 this.className...点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈播放 circle++; // 如果circle == 4 说明走到最后我们克隆这张图片了...} // 留下当前小圆圈current名 ol.children[circle].className = 'current'; }

    3K10

    JQuery 入门 - 附案例代码

    基本选择器 名称 用法 描述 ID选择器 $(“#id”); 获取指定ID元素 选择器 $(“.class”); 获取同一class元素 标签选择器 $(“div”); 获取同一标签所有元素...*1.添加一个*/ $('li').addClass('now'); /*2.删除一个*/ $('li').removeClass('now'); /*3.切换一个.../*如果想克隆事件 false true克隆事件*/ var $cloneP = $('p').clone(true); 添加&移动节点 /*追加自身最后面 传对象和html...【案例:五角星评分案例.html】 each方法 jQuery隐式迭代会对所有的DOM对象设置相同值,但是如果我们需要给每一个对象设置不同时候,就需要自己进行迭代了。...li标签设置鼠标移入事件: 当前li添加active,其他兄弟li移除active. // 找到当前tab栏索引一致div,让他添加 selected,其他兄弟div移除selected

    13.9K10

    Jump Start Bootstrap 第4章

    这个ul元素应该有”dropdown-menu”。现在,我们有了一个简单下拉菜单,在单击链接时显示菜单。我们可以在浏览器中查看它,如图所示。 ?...要创建此复选框组,您需要一个带有”btn-group”包裹按钮,这个还应该具有一个data-toggle=”buttons”属性来切换数据。...与普通面板panel-body没有包装在任何div中不同,在这里被div包裹是强制性,以达到折叠效果。...这将是一个包含carousel-innerdiv。每个幻灯片由一个具有”item”元素定义。每个项目都必须有一个表示图像和可选文本数据。这个图像将被用作这个特殊幻灯片项目的背景。...添加data-dismiss使按钮在单击时关闭模式对话框。 对于本体,我们需要一个包含modal-body元素。您可以将几乎任何内容放到该元素中。

    28.3K40

    13个需要知道方法:使用 JavaScript 来操作 DOM

    // 返回第一个 ul 元素 const list = document.querySelector('ul') // 返回所有名为 info 或者 warning div 元素 const elements...('ul'); let firstCity = list.querySelector('ul > li'); let newCity = document.createElement('li'); newCity.textContent...Node.cloneNode(deep) 方法返回调用该方法节点一个副本,deep(可选)表示是否采用深度克隆,如果为true,则该节点所有后代节点也都会被克隆,如果为false,则只克隆该节点本身...id); // outputs my-list Element.hasAttribute / Element.removeAttribute Element.hasAttribute方法检查给定元素是否具有指定属性...通过调用Element.removeAttribute方法,我们可以从元素中删除具有给定名称属性。

    66620
    领券