jQuery——元素的创建及添加

最新推荐文章于 2024-07-02 06:55:36 发布

原创最新推荐文章于 2024-07-02 06:55:36 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

本文介绍了使用jQuery如何动态创建并添加元素，如点击按钮生成多个p标签的实例，同时展示了动态创建列表的案例。

    <style>
        div{
            width:300px;
            height:200px;
            background-color:pink;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //页面加载后，点击按钮，在div中创建一个超链接
        $(function(){
            $("#btn").click(function(){
                //在父级元素div中追加一个创建后的子元素
                //父级元素.append(子级元素);
                //1.
                $("#dv").append($("<a href='http://www.baidu.com'>百度</a>"));
                //创建一个子级元素直接加到父级元素
                // 2.
                $("<a href='http://www.baidu.com'>百度</a>").appendTo($("#dv"));
            });
        });
    </script>
......
<input type="button" value="创建一个a标签" id="btn"/>
<div id="dv"></div>

例：点击按钮创建多个p标签

    <style>
        div{
            width:300px;
            height:200px;
            border: 1px solid red;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                //$("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
               	//$("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
                //$("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
                //$("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
                //$("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
                //$("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
                //$("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
                  $("#btn").click(function(){
                    for(var i=0;i<10;i++){
                        $("#dv").append($("<p>成就如沙堡 生命如海浪 浪花会淘尽 所有的幻象</p>"));
                    }
                });
        	});
    </script>
......
<input type="button" value="显示标签" id="btn"/>
<div id="dv"></div>

动态创建列表案例

    <script src="jquery-1.12.1.js"></script>
    <script>
        //点击按钮的时候实现
        //在div中动态的创建列表
        $(function(){
            var array=["在我的时代 还有唱片行","如同博物馆 装满了希望","披头与枪花 爱情和忧伤","永远骄傲 高唱","成就如沙堡 生命如海浪","浪花会淘尽 所有的幻象"];
            //根据id选择器获取按钮，添加点击事件
            $("#btn").click(function(){
                //先创建ul加入到div中
                var ulObj=$("<ul style='cursor:pointer'></ul>").appendTo($("#dv"));
                //创建li标签，加入到ul中——循环遍历数组
                for (var i=0;i<array.length;i++){
                    $("<li>"+array[i]+"</li>").appendTo(ulObj).mouseenter(function(){
                        $(this).css("backgroundColor","darkgreen");
                    }).mouseleave(function(){
                        $(this).css("backgroundColor","");
                    });
                }
            })
        })
    </script>