首页
学习
活动
专区
工具
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

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

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

    7.1K10

    原生 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操作,我们主要针对于元素操作。

    10110

    利用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

    网页轮播图案例

    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

    网页轮播图案例

    ('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

    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

    50个必备实用jQuery代码段

    name="item" class="unknown" /> Item Z 如何正确地使用toggleClass: //切换(toggle)允许你根据某个 //是否存在来添加或是删除该类...e = $("", { href: "#", class: "a-class another-class", title: "..." }); 如何使用多个属性来进行过滤 //在使用许多相类似的有着不同类型...*包含了对这一has方法支持。 //该方法找出某个元素是否包含了其他另一个元素或是其他任何你正在查找并要在其之上进行操作东东。...它存在…… } 如何使用jQuery来检测右键和左键鼠标单击两种情况: $("#someelement").live('click', function(e) { if( (!...$.ajax() 有个参数global (默认: true) 是否触发全局 AJAX 事件.设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同

    6.7K00
    领券