JQuery实现动态插入HTML模块

最新推荐文章于 2024-04-07 20:26:20 发布

怎奈你何

最新推荐文章于 2024-04-07 20:26:20 发布

阅读量953

点赞数

分类专栏： js jquery

原文链接：https://blog.csdn.net/Immortal_W/article/details/86565060

版权

js 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

JQuery实现动态插入HTML模块

在项目中经常会遇到需要动态生成某个模块并将其插入到原有的HTML页面中，那么我就将我所知道的方法总结如下：
选择器选择的都是父级，添加到父级里
append：$("#wrap").append(“

啦啦啦
“); 添加到父级中所有子元素的最前面
appendto: ( " 啦啦啦 " ) . a p p e n d T o ( ("啦啦啦 ").appendTo( ("啦啦啦").appendTo((”#wrap”)); 添加到父级中所有子元素的最前面

prepend: $("#wrap").prepend(“

啦啦啦
“); 添加到父级中所有子元素的最前面
prependto: ( " 啦啦啦 " ) . p r e p e n d T o ( ("啦啦啦 ").prependTo( ("啦啦啦").prependTo((”#wrap”)); 添加到父级中所有子元素的最前面

添加到与父级同级
after: $("#wrap").after(“

啦啦啦
“); 添加到当前选择的父级元素前面
insertafter: ( " 啦啦啦 " ) . i n s e r t A f t e r ( ("啦啦啦 ").insertAfter( ("啦啦啦").insertAfter((”#wrap”)); 添加到当前选择的父级元素前面

before: $("#wrap").before(“

啦啦啦
“); 添加到当前选择的父级元素后面
insertbefore: ( " 啦啦啦 " ) . i n s e r t B e f o r e ( ("啦啦啦 ").insertBefore( ("啦啦啦").insertBefore((”#wrap”)); 添加到当前选择的父级元素后面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js中常用追加元素的几种方法</title>
    <!--<link rel="stylesheet" href="css/rest.css" />-->
    <style>
        .container {
            width: 1200px;
            padding: 10px;
            margin: 50px auto;
            border: 1px solid lightcoral;
        }
        #wrap{
            border: 1px solid lightseagreen;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .container p{
            height: 30px;
            line-height: 30px;
        }
        .btn-group{
            margin-top: 20px;
        }
        button{
            width: 80px;
            height: 32px;
            margin-right: 10px;
            line-height: 32px;
            text-align: center;
            border: 0px;
        }
        .test{
            width: 300px;
            height: 200px;
            border: 1px salmon solid;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="test">

    </div>
    <div id="wrap">
        <p class="first">我是第一个子元素</p>
        <p class="second">我是第二个子元素</p>
    </div>
    <div class="test">

    </div>
    <div class="btn-group">
        <button class="append">append</button>
        <button class="appendTo">appendTo</button>
        <button class="prepend">prepend</button>
        <button class="prependTo">prependTo</button>
        <button class="after">after</button>
        <button class="insertAfter">insertAfter</button>
        <button class="before">before</button>
        <button class="insertBefore">insertBefore</button>
    </div>

</div>

</body>
</html>
<script src="../js/jquery-3.2.1.js"></script>
<script>
    var i = 0;
    $(function(){
        //append(),在父级最后追加一个子元素
        $(".append").click(function(){
            $("#wrap").append("<p class='three'>我是子元素append"+i+"</p>");
            i++;
        });

        //appendTo(),将子元素追加到父级的最后
        $(".appendTo").click(function(){
            $("<p class='three'>我是子元素appendTo"+i+"</p>").appendTo($("#wrap"));
            i++;
        });

        //prepend(),在父级最前面追加一个子元素
        $(".prepend").click(function(){
            $("#wrap").prepend("<p class='three'>我是子元素prepend"+i+"</p>");
            i++;
        });

        //prependTo(),将子元素追加到父级的最前面
        $(".prependTo").click(function(){
            $("<p class='three'>我是子元素prependTo"+i+"</p>").prependTo($("#wrap"));
            i++;
        });

        //after(),在当前元素之后追加（是同级关系）
        $(".after").click(function(){
            $("#wrap").after("<p class='siblings'>我是同级元素after"+i+"</p>");
            i++;
        });

        //before(),在当前元素之前追加（是同级关系）
        $(".before").click(function(){
            $("#wrap").before("<p class='siblings'>我是同级元素before"+i+"</p>");
            i++;
        });

        //insertAfter(),将元素追加到指定对象的后面（是同级关系）

        $(".insertAfter").click(function(){
            $("<p class='three'>我是同级元素insertAfter"+i+"</p>").insertAfter($("#wrap"));
            i++;
        });
        //insertBefore(),将元素追加到指定对象的前面（是同级关系）
        $(".insertBefore").click(function(){
            $("<p class='three'>我是同级元素insertBefore"+i+"</p>").insertBefore($("#wrap"));
            i++;
        });
    });

</script>

转自：https://blog.csdn.net/Immortal_W/article/details/86565060

怎奈你何

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现动态插入HTML模块

JQuery实现动态插入HTML模块在项目中经常会遇到需要动态生成某个模块并将其插入到原有的HTML页面中，那么我就将我所知道的方法总结如下：选择器选择的都是父级，添加到父级里append：$("#wrap").append(“啦啦啦“); 添加到父级中所有子元素的最前面appendto: ( &quot; &lt; p &gt; 啦啦啦 &lt; / p &gt; &quot; ) . a p p e n d T o ( (&qu
复制链接

扫一扫

专栏目录