jQuery的append,clone,replaceWith的用法

<body>
    <p>This is a test</p>   
    <span>喜欢写代码</span>
</body>

1、append和prepend

相同点:都可以在本标签内进行html内容的插入

不同点:append把html的内容插到本标签的尾部,而prepend则把内容插入到本标签的头部

JS代码:

<script type="text/javascript">
    $(document).ready(function(){
	   $('span').append('<div>插入到span标签的尾部</div>');
	   $('span').prepend('<div>喜欢旅游,插入到span标签的头部</div>');
	})
  </script>

 结果:append :<p>This is a test</p>                        <span>喜欢写代码

                       <div>append插入到span标签的尾部</div>

                     </span>

     prepend : :<p>This is a test</p>                        <span>                        

                       <div>prepend喜欢旅游,插入到span标签的头部</div>

                       喜欢写代码                     

                     </span>

2、appendTo和prependTo

相同点:把所有匹配的元素追加到另一个指定的元素集合中。

不同点:appendTo加到是结尾,prependTo加到开头

相关推荐