JQuery实现动态插入HTML模块

最新推荐文章于 2021-07-02 22:20:00 发布

原创最新推荐文章于 2021-07-02 22:20:00 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用JQuery在项目中动态生成HTML模块并将其插入到页面的指定位置，包括append、prepend、after和before等方法的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery实现动态插入HTML模块

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

啦啦啦

“); 添加到父级中所有子元素的最前面
appendto:

(" < p > 啦 啦 啦 < / p > ") . a p p e n d T o (

(”#wrap”)); 添加到父级中所有子元素的最前面

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

啦啦啦

“); 添加到父级中所有子元素的最前面
prependto:

(" < p > 啦 啦 啦 < / p > ") . p r e p e n d T o (

(”#wrap”)); 添加到父级中所有子元素的最前面

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

啦啦啦

“); 添加到当前选择的父级元素前面
insertafter:

(" < p > 啦 啦 啦 < / p > ") . i n s e r t A f t e r (

(”#wrap”)); 添加到当前选择的父级元素前面

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

啦啦啦

“); 添加到当前选择的父级元素后面
insertbefore:

(" < p > 啦 啦 啦 < / p > ") . i n s e r t B e f o r e (

(”#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>
``