jQuery----复制克隆（复制节点）

最新推荐文章于 2024-10-28 14:26:55 发布

hemingyang97

最新推荐文章于 2024-10-28 14:26:55 发布

阅读量2.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签：复制克隆复制节点 clone appendTo

本文链接：https://blog.youkuaiyun.com/hemingyang97/article/details/80890310

jQuery 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个简单的jQuery示例，展示了如何通过点击事件克隆并追加列表项到HTML页面上的过程。该示例利用jQuery的clone和appendTo方法实现动态内容更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clone：克隆匹配的DOM元素并且选中这些克隆的副本。

appendTo：把所有匹配的元素追加到另一个指定的元素元素集合中。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复制克隆</title>
    <meta charset="utf-8" />
    <script src="../scripts/jquery-1.3.1.js"></script>
    <script>
        //文档准备就绪函数
        $(function () {
            //获取li标签及点击事件
            $("ul li").click(function () {
                //对这个li标签使用clone克隆（clone(true)添加true使复制过的还能继续复制）
                //，然后添加到ul标签里面
                $(this).clone(true).appendTo("ul");
            });
        });
    </script>
</head>
<body>
    <p title="选择你喜欢的水果">选择你喜欢的水果是？</p>
    <ul>
        <li title="苹果" id="app">苹果1</li>
        <li title="香蕉">香蕉1</li>
        <li title="橘子">橘子1</li>
        <li title="梨">梨1</li>
    </ul>
</body>
</html>