专业编程基础技术教程

网站首页 > 基础教程 正文

jQuery复制元素节点的方法【405】

ccvgpt 2024-10-12 15:08:30 基础教程 43 ℃
  • 元素节点的复制主要是用clone()。

一、我们先做一个列表，并且添加好外链jQuery库。

二、做列表项的点击事件，事件内是空的。

jQuery复制元素节点的方法【405】

三、我们检验一下点击效果。

四、现在我们换成复制元素节点，用的是clone()。

五、于是你发现元素节点可以复制了，但复制出来的节点点击没有效果。

  • 在clone()里个true，就是复制的时候，把事件等一起复制，这样子复制出来的项也就可以点击了。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
 <p>水果</p>
 <ul>
 <li>哈密瓜</li>
 <li>柚子</li>
 <li>青柠</li>
 </ul>
 <script>
 $("ul li").click(function () {
 $(this).clone(true).appendTo($("ul"));
 // 复制后添加回ul元素中
 });
 </script>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表