jquery之创建和添加元素创建元素和添加元素创建元素 $("内容") 添加元素前追加子元素指定元素.prepen

创建元素和添加元素

创建元素 $("内容") 添加元素

前追加子元素指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。 $(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。
后追加子元素指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。 $(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。
前追加同级元素 before() 在指定元素的前面追加内容
后追加同级元素 after() 在指定元素的后面追加内容

注：在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>创建元素和添加元素</title>
        <style>
            div {
                margin: 10px 0;
            }
            span{
                color: white;
                padding: 8px
            }
            .rd{
                background-color: red;
            }
            .bl{
                background-color: blue;
            }
            .gn{
                background-color: green;
            }
            .pk {
                background-color: pink;
            }
            .gy{
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <h3>prepend()方法前追加内容</h3>
        <h3>prependTo()方法前追加内容</h3>
        <h3>append()方法后追加内容</h3>
        <h3>appendTo()方法后追加内容</h3>

        <span class="rd">rap</span>
        <span class="bl">跳</span>
        <div class="gn">
            <span >唱</span>
        </div>
    </body>
     <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
        // 创建元素
        const p = "<p>这是一个p标签</p>";
        console.log('元素p',p);
        console.log('创建的元素',$(p));

        /* 添加元素 */
        // 创建元素
        const span = "<span>小狗</span>";
        // 得到指定元素，并在元素的内部最前面追加内容
        $(".gn").prepend(span);
        const span2 = "<span>狼狗</span>";
        $(span2).prependTo($(".gn"));

        const span3 = "<span>小狗1</span>";
        const span4 = "<span>小狗2</span>";
        $(".gn").append(span3);
        $(span4).appendTo($(".gn"));

        // 将已存在内容追加到指定元素中
        $(".gn").append($(".rd"));


        /* 同级追加 */
        const sp1 = "<span class='pk'>大白</span>";
        const sp2 = "<span class='gy'>小白</span>";

        $(".bl").before(sp1);
        $(".bl").after(sp2);

     </script>
</html>