jquery追加内容
Posted haoxl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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追加内容的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 追加元素的方法如appendprependbefore