jQuery追加元素

最新推荐文章于 2021-12-17 15:24:33 发布

layroy

最新推荐文章于 2021-12-17 15:24:33 发布

阅读量555

点赞数

分类专栏： jQuery 文章标签： jquery html5 html

本文链接：https://blog.csdn.net/m0_57202083/article/details/119974657

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文通过实例代码介绍如何使用jQuery动态追加HTML元素，包括在DOM末尾、开头及指定位置插入元素的方法，帮助理解jQuery操作DOM的灵活性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        .fire{
            background-color: blue;
        }

    </style>
</head>
<body>
    <ul>
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
        <li>四娃</li>
        <li>五娃</li>
        <li>六娃</li>
        <li>七娃</li>
    </ul>
    <input type="button" value="点击一下  追加一个娃娃" id="appendBtn">
    <input type="button" value="子元素选择器  查找 第几个 儿子 类似 eq" id="childBtn">
    <input type="button" value="删除元素" id="delBtn">
    <input type="button" value="清空标签下的所有元素" id="emptyBtn">
    <input type="button" value="给四娃添加颜色" id="cssBtn">
    <input type="button" value="给四娃删除颜色" id="delClassBtn">
    <input type="button" value="给五娃前面加个孙悟空" id="beforeBtn">
    <input type="button" value="给五娃后面加个唐僧" id="afterBtn">

    <script>
        $(function() {    
        //追加  娃子
            $("#appendBtn").click(function() {
                //第一步 构建一个 jquery dom元素
              var liDom =  $("<li>娃娃</li>"); //这样叫做 构建 jquery的dom元素
            //$("ul").append(liDom);//追加只在末尾追加
            //liDom.appendTo("ul");   //理解，append 和 appendTo   插入  的区别
            //$("ul").prepend(liDom);     //前面追加
            liDom.prependTo("ul");  //前面追加

            })

            $("#childBtn").click(function() {
                //获取第一个 li元素
                console.log("ul li:eq(0)");
                console.log("ul li:first-child");
                console.log("ul li:first");
           

            $("#lastBtn").click(function() {
                //获取第一个 li元素
                console.log("ul li:eq(0)");
                console.log("ul li:first-child");
                console.log("ul li:first");

                //获取最后一个元素
                console.log("-----------------");
                console.log("ul li:last");
                console.log("ul li:last-child");

                //获取 指定元素  如：第三个
                console.log("-----------------");
                console.log("ul li:eq(2)");
                console.log("ul li:nth-child(1)");  //注意    nth-child是从1开始的
            })
        })

            //删除元素
            $("#delBtn").click(function() {
                //比如删除第一个元素
                $("ul li:eq(2)").remove();
            })

            //清空元素
            $("#emptyBtn").click(function() {
                $("ul").empty();
            })

            //给元素添加样式
            $("#cssBtn").click(function() {
                $("ul li:eq(3)").addClass('fire');
            })

            //删除一个属性
            $("#delClassBtn").click(function() {
                $("ul li:eq(3)").removeClass('fire');
            })

            //给五娃前面加  元素
            $("#beforeBtn").click(function() {
                $("ul li:eq(4)").before($("<li>孙悟空</li>"))
            })

             //给五娃前面加  元素
             $("#afterBtn").click(function() {
                $("ul li:eq(4)").after($("<li>唐僧</li>"))
            })
        })
    </script>
</body>
</html>

效果图展示：

layroy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery追加元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫