jquery02-08节点操作_$("button:first")-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/53054881

本文通过实例详细介绍了使用jQuery进行DOM操作的方法，包括节点的添加、删除、替换等常见操作，并展示了如何利用jQuery简化这些任务。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("button:first").click(function(){
                //append追加
                $("div").append("<p>我是动态创建的p1</p>")
            });
            $("button:eq(1)").click(function () {
                //把前面这个元素追加给后面元素
                $("<p>我也是动态创建的p2</p>").appendTo("div");
            });

            $("button:eq(2)").click(function(){
                //append追加
                $("div").prepend("<p>我是动态创建的p3</p>")
            });
            $("button:eq(3)").click(function () {
                //把前面这个元素追加给后面元素
                $("<p>我也是动态创建的p4</p>").prependTo("div");
            });

            $("button:eq(4)").click(function () {
                //把前面这个元素追加给后面元素
                $("div").before("<p>我是动态创建的p5</p>")

            });
            $("button:eq(5)").click(function () {
                //把前面这个元素追加给后面元素
                $("div").after("<p>我是动态创建的p5</p>");
            });
            $("button:eq(6)").click(function () {
                //把前面这个元素追加给后面元素
                $("<p>我也是动态创建的p7</p>").insertBefore("div");
            });
            $("button:eq(7)").click(function () {
                //把前面这个元素追加给后面元素
                $("<p>我也是动态创建的p8</p>").insertAfter("div");
            });

            $("button:eq(8)").click(function () {
                $("div").remove();
            });
            $("button:eq(9)").click(function () {
                $("div").empty();
            });

            $("button:eq(10)").click(function () {
                $("span").wrap("div");
            });
            $("button:eq(11)").click(function () {
                $("div").wrapAll();
            });

        });
    </script>
</head>
<body>
<button>append追加节点</button>
<button>appendTo追加节点</button>
<button>prepend追加节点</button>
<button>prependTo追加节点</button>

<button>before追加节点</button>
<button>after追加节点</button>
<button>insertBefor追加节点</button>
<button>insertAfter追加节点</button>

<button>remove删除节点</button>
<button>empty清空节点</button>

<button>wrap包裹单个节点</button>
<button>wrapAll包裹所有节点</button>


<div>
    <h1>我是标题h1</h1>

</div>
<span>我是小span</span>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>