Jquery基础：append、prepend、after、before、appendTo的区别

append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容。

<html>
　　<head>
　　　　<script type="text/javascript" src="/jquery/jquery.js"></script>
　　　　<script type="text/javascript">
　　　　　　$().ready(function(){
  　　　　　　$("button").click(function(){
      　　　 　　$("span").append("<a href="#">ddddd</a>")
  　　　　　　})
　　　　　　})
</script>
 
</head>
<body>
    <span>aaaaaaaaaaaaaaa</span><button>after函数</button>
</body>
</html>

结果如下：

aaaaaaaaaaaaaaa<a href="#">ddddd</a>
span标签里面多了一个a标签

after() 是在被选元素的结束标签后面（即该被选元素的外部）插入指定的内容。

<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
　　　　 <script type="text/javascript">
　　　　　　$().ready(function(){  
　　　　　　　　$("button").click(function(){    
　　　　　　　　　　$("span").after("<a href="#">ddddd</a>")
  　　　　　　　})
　　　　　　})
</script>
</head>
<body>
    <span>aaaaaaaaaaaaaaa</span><button>after函数</button>
</body>
</html>

结果如下：

aaaaaaaaaaaaaaa
<a href="#">ddddd</a>

span标签后面多了一个a标签

appendTo() 仍然是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容，只不过是jQuery函数的写法不太相同。

<html>
　　<head>
　　　　<script type="text/javascript" src="/jquery/jquery.js"></script>
　　　　<script type="text/javascript">
　　　　　　$().ready(function(){
  　　　　  　　$("button").click(function(){
    　　 　　　 　　// $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的
　　　　　　　　 　　$("<a href="#">ddddd</a>").appendTo("span")
  　　　　　　　})
　　　　　　})
</script>
</head>
<body>
　　<span>aaaaaaaaaaaaaaa</span><button>after函数</button>
</body>
</html>

结果如下：

aaaaaaaaaaaaaaa<a href="#">ddddd</a>
span标签里面多了一个a标签

效果和append函数是一样，只不过它们的写法是反着来写的而已

pretend()和before()的区别与append()和after()的区别是一样的。

相关阅读:
vim介绍 & vim颜色显示和移动光标& vim一般模式下移动光标 & vim一般模式下复制、剪切和粘贴
lvm 详解磁盘故障小案例
磁盘格式化、磁盘挂载、手动增加swap空间
df du 磁盘分区
su sudo 限制root远程登录
usermod 用户密码管理 mkpasswd
顺序查找,二分法查找,插值查找算法实现及分析
完全二叉树的构建及三种遍历
Mybatis由于类型转换出现的问题
delimiter解释

原文地址：https://www.cnblogs.com/henuyuxiang/p/7411537.html