jquery02-08节点操作

最新推荐文章于 2021-07-23 12:21:23 发布

python基础教程

最新推荐文章于 2021-07-23 12:21:23 发布

阅读量259

点赞数

分类专栏： 02jquery

本文链接：https://blog.csdn.net/stopcpp/article/details/53054881

版权

02jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

python基础教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery02-08节点操作

<!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").
复制链接

扫一扫