jquery追加内容

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #content{

            width: 300px;

            height: 300px;

            padding:10px;

            background-color: pink;

        }

        .base{

            background-color: yellowgreen;

        }

        .wrap{

            background-color: gray;

        }

        .wrap-inner{

            background-color: purple;

        }

    </style>

    <script src="design/static/js/jquery_1.10.2.min.js"></script>

</head>

<body>

<div id="content">

    <p class="base">我是一条测试内容</p>

</div>

<p class="test-wrap">我是用wrap追加进来的一条内容</p>

<p class="test-wrap">我是用wrap追加进来的一条内容2</p>

<p class="test-wrapAll">我是用wrapAll追加进来的一条内容</p>

<p class="test-wrapAll">我是用wrapAll追加进来的一条内容</p>

<p class="test-wrap-inner">我是用来测试wrapInner的</p>

</body>

</html>

<script>

    $(function(){

        //A代表位置，B代表要追加的内容

        //1.A.append(B) 在A的后面追加B，注意B在A的内部，即做为其孩子节点

       $('#content').append('<p>我是用append追加进来的一条内容</p>');

        //2.A.after(B) 即在A的后面追加A，注意A做为B的兄弟

        $('#content').after('<p>我是用after追加进来的一条内容</p>');

        //3.B.appendTo(A) 即把A追加到B的后面，注意A在B的内部

        $('<p>我是用appendTo追加进来的一条内容</p>').appendTo($('.base'));

        //4.A.prepend(B) 即在A的内部的最顶部追加B，注意B在A的内部

        $('#content').prepend('<p>我是用prepend追加进来的一条内容</p>');

        //5.B.prependTo(A) 即把B追加到A的内部的顶部，注意B在A的内部

        $('<p>我是用prependTo追加进来的一条内容</p>').prependTo($('.base'));

        //6.A.before(B) 即在A的前面追加B，注意B在A的外部

        $('#content').before('<p>我是用before追加进来的一条内容</p>');

        //7.B.wrap(A) 即在B的外面再包一层A

        $('.test-wrap').wrap('<div class="wrap"></div>');

        //$('.test-wrap').wrap($('#content'));

        //8.B.wrap(A) 即在B的外面再包一层A,与wrap不同的是wrapAll包住了所有的B，而wrap则是在每个B外面都包一个A

        $('.test-wrapAll').wrapAll('<div class="wrap"></div>');

        //9.B.wrapInner(A) 即在B的里面加一层A

        $('.test-wrap-inner').wrapInner('<div class="wrap-inner"></div>')

    });

</script>
秒客网

jquery追加内容

相关文章
