首页 > 代码库 > jquery追加内容

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="http://www.mamicode.com/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追加内容