jQuery添加元素的方法

最新推荐文章于 2025-06-25 11:21:10 发布

原创最新推荐文章于 2025-06-25 11:21:10 发布 · 888 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了实现效果图的五种方法，但未详细说明方法内容。

	 方法一：父元素.append();/appendTo().父元素//主动或被动的在父元素中添加内容
     方法二：父元素.html()//会将父元素中的内容全部覆盖
     方法三：父元素.prepend();//在父元素的第一个子元素的前面添加内容
     方法四：当前元素.before();//把添加的内容当作当前元素的前一个兄弟元素添加
     方法五：当前元素.after();//把添加的内容，当作当前元素的下一兄弟元素添加。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.1.js"></script>
    <style>
        .box {
            width:300px;
            height:200px;
            border:1px solid red;
        }
    </style>
    <script>
        /*
         * 要求：点击按钮添加一个按钮
         * 方法一：父元素.append()
         * 方法二：父元素.html()//会将父元素中的内容全部覆盖
         * 方法三：父元素.prepend
         * 方法四：当前元素.before();
         * 方法五：当前元素.after();
         
         */
        $(function () {
            //为按钮添加点击事件
            $('#btn').click(function () {
                //方法一：append()创建
                $('.box').append($('<input type="button" value="dianji">'));
            });
            $('#btn1').click(function () {
                //方法二：html()创建//
                $('.box').html($('<input type="button" value="dianji">'));
            });
            $('#btn2').click(function () {
                //方法三：prepend()创建//实在当前父元素的的第一个子元素前添加内容
                //$('.box').prepend($('<span>我是span</span>'));//被动添加
                $('<span>我是span</span>').prependTo($('.box'));  //主动添加 
            });
            $('#btn3').click(function () {
                //方法四：after()创建//把创建的内容当作当前元素的下一个兄弟元素添加
                $('.box').after($('<span>我是span</span>'));
            });
            $('#btn4').click(function () {
                //方法五：before()创建//把创建的内容当作当前元素的前一个兄弟元素添加
                $('.box').before($('<span>我是span</span>'));
            });
        });
    </script>
</head>
<body>
    <input type="button" value="append" id="btn">
    <input type="button" value="html" id="btn1">
    <input type="button" value="perpend" id="btn2">
    <input type="button" value="after" id="btn3">
    <input type="button" value="before" id="btn4">
    <div class="box"><p>我是P标签</p></div>
</body>
</html>