文章目录

  • 添加节点相关方法
  • 删除节点相关方法
  • 替换节点相关方法
  • 复制节点相关方法


添加节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").click(function() {
                // 创建一个节点
                var $li = $("<li>新增的li</li>")
                    // 添加节点
                    // $("ul").append($li);//会将元素添加到指定元素内部的最后
                    // $("ul").prepend($li);//会将元素添加到指定元素内部的最前
                    // $li.appendTo("ul");//会将元素添加到指定元素内部的最后
                    // $li.prependTo("ul"); //会将元素添加到指定元素内部的最前

                // $("ul").after($li);//会将元素添加到指定元素外部的后面
                // $("ul").before($li);//会将元素添加到指定元素外部的前面
                // $li.insertAfter("ul");//会将元素添加到指定元素外部的后面
                // $li.insertBefore("ul")//会将元素添加到指定元素外部的前面
            });
        });
    </script>
</head>

<body>
    <button>添加</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>

</body>

</html>
  • 内部：添加到指定元素内部最后：$("ul").append($li);，添加到指定元素内部最前：$("ul").prepend($li);。
  • 外部：添加到指定元素外部的后面：$("ul").after($li);，添加到指定元素外部的前面：$("ul").before($li);

删除节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").click(function() {
                // $("div").remove();//删除指定元素
                // $("div").empty();//删除指定元素的内容和子元素
                // $("li").detach(".item");//与remove类似
            });
        });
    </script>
</head>

<body>
    <button>删除节点</button>
    <ul>
        <li class="item">我是第1个li</li>
        <li>我是第2个li</li>
        <li class="item">我是第3个li</li>
        <li>我是第4个li</li>
        <li class="item">我是第5个li</li>
    </ul>
    <div>我是div
        <p>我是段落</p>
    </div>
</body>

</html>
  • remove()：删除指定元素。
  • empty()：删除指定元素的内容和子元素。

替换节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>替换节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {

            $("button").click(function() {
                // 新建元素
                var $h6 = $("<h6>我是标题6</h6>");
                // 替换元素
                // $("h1").replaceWith($h6);//替换所有匹配的元素为指定的元素
                $h6.replaceAll("h1");//替换所有匹配的元素为指定的元素
            });
        });
    </script>
</head>

<body>
    <button>替换节点</button>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <p>我是段落</p>
</body>

</html>
  • $("h1").replaceWith($h6);，$h6.replaceAll("h1");：替换所有匹配的元素为指定的元素。

复制节点相关方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 浅复制一个元素
                var $li = $("li:first").clone(false);
                // 将复制的元素添加到ul中
                $("ul").append($li);
            });
            $("button").eq(1).click(function() {
                // 深复制一个元素
                var $li = $("li:first").clone(true);
                // 将复制的元素添加到ul中
                $("ul").append($li);
            });
            $("li").click(function() {
                alert("hello");
            });
        });
    </script>
</head>

<body>
    <button>浅复制节点</button>
    <button>深复制节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
</body>

</html>
  • clone(flase)浅复制，只会复制元素，不会复制元素的事件。
  • clone(true)深复制，会复制元素的事件。

jquery 新建ul jquery给ul添加li_添加节点