jquery学习-dom相关操作跟方法

最新推荐文章于 2024-07-05 14:21:58 发布

深山老妖&

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量82

点赞数

分类专栏： jquery学习笔记文章标签： jquery添加元素的方法

本文链接：https://blog.csdn.net/qq_39573741/article/details/84593583

版权

jquery学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jquery常用的几中添加元素的方法：

append()：在某个元素中添加一个元素。这种方式是在原有的元素之后添加。
appendTo()：将某个元素添加到一个元素中。这种方式是在原有的元素之后添加。
prepend()：在某个元素中添加一个元素。这种方式是在原有的元素之前添加。
prepend()：将某个元素添加到一个元素中。这种方式是在原有的元素之前添加。

注：以上这几个方法添加的元素是父子级关系。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <button>append</button>
    <button>appendTo</button>
    <button>prepend</button>
    <button>prependTo</button>
    <input type="text">
    <ul id="ul1">
        <li>hello</li>
    </ul>
    <script type="text/javascript">
        $(function () {
            //在原有的元素末尾添加
            $('button:eq(0)').click(function () {
                var $li = $('<li>'+$('input').val()+'</li>');
                //创建一个元素

                $('#ul1').append($li)
                //在id为ul1的元素中添加一个名为$li的元素。这种方式是在原有的元素后面添加。
            });
            $('button:eq(1)').click(function () {
                var  $li = $('<li>'+$('input').val()+'</li>');
                $li.appendTo($('#ul1'));
                //将名为$li的元素添加到id为ul1的元素中。这种方式是在原有的元素后面添加。
            });

            //在原有的元素前面添加
            $('button:eq(2)').click(function () {
                var  $li = $('<li>'+$('input').val()+'</li>');
                $('#ul1').prepend($li);
                //在id为ul1的元素中添加一个名为$li的元素。这种方式是在原有的元素前面添加。
            });
            $('button:eq(3)').click(function () {
                var  $li = $('<li>'+$('input').val()+'</li>')
                $li.prependTo('#ul1')
                //将名为$li的元素添加到id为ul1的元素中。这种方式是在原有的元素前面添加。
            });
        })
    </script>
</body>
</html>

注：以下这几个方法添加的元素是兄弟关系。

after()：在某个元素后面添加一个元素。这种方式是在原有的元素之后添加。
insertAfter()：把某个与那是添加到一个元素后面。这种方式是在原有的元素之后添加.
before()：在某个元素前面添加一个元素。这种方式是在原有的元素之前添加.
insertBefore()：把某个元素添加到一个元素后面。这种方式是在原有的元素之前添加.

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <button>添加元素</button>
    <script type="text/javascript">
        $(function () {
            $('button').click(function () {
                var  $btn = $('<button>wdad</button>');
                //在选中的元素后面添加
                // $(this).after($btn)
                //将元素添加到选中的元素后面
                // $btn.insertAfter(this)
                //在选中的元素前面添加
                // $(this).before($btn);
                //将元素添加到当前点击的元素前面

                $btn.insertBefore(this)

            })


        })
    </script>
</body>
</html>

深山老妖&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery学习-dom相关操作跟方法

jquery常用的几中添加元素的方法：append()：在某个元素中添加一个元素。这种方式是在原有的元素之后添加。appendTo()：将某个元素添加到一个元素中。这种方式是在原有的元素之后添加。prepend()：在某个元素中添加一个元素。这种方式是在原有的元素之前添加。prepend()：将某个元素添加到一个元素中。这种方式是在原有的元素之前添加。注：以上这几个方法添加的元素是父...
复制链接

扫一扫

专栏目录