jQuery 学习5 添加元素
同学们，这节课，使用jQuery动态添加元素，是很关键的一课，一般用在什么地方呢：别人发表一篇文章，你评论楼主的时候，总不能是提交表单，到后台的其他页面处理，然后再刷新回来吧，这样的话，用户体验不好。考虑一下用户的计算机配置不好、网络不好等多个因素，总是刷新页面，会造成等待的时间太长。甚至有的浏览器直接刷新不出来了，那么用户就抓狂了，就对你的产品有怨言。
所以，我们做前端，要实现动态添加，以后再使用ajax这类异步刷新和后台交互就可以了，那么多的不说，我们现在学的阶段，就掌握前端的静态、动态就好了。
jQuery添加元素，提供了四个方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
以上是引用w3c教程里的
四个几乎都是一样的，只是插入的内容位置不一样，所以说，只要掌握到其中一个，其他的，都是 soez，老师这里就展示append()方法，在被选中元素的结尾处添加内容，是什么样子的呢？我们看代码，看页面效果：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>jQuery 学习5 添加元素</title> ???<!--使用jQuery一定不要忘记引用jQuery文件--> ???<script src="../js/jquery-1.12.2.min.js"></script> ???<style> ???????#div1 { ???????????margin: auto; ???????????width: 750px; ???????????border: 1px solid #dedede; ???????????padding:15px; ???????} ???????#div1-1 img{ ???????????width: 75px; ???????} ???????.div1-2{ ???????????margin-top:30px; ???????} ???????.div1-2 img{ ???????????width: 75px; ???????} ???????.y{ ???????????float: right; ???????} ???????.content{ ???????????background-color: #dedede; ???????????padding: 10px; ???????????margin-top:20px; ???????} ???????#div2{ ???????????margin: auto; ???????????width: 750px; ???????????margin-top:20px; ???????} ???????#div2 input{ ???????????width: 80%; ???????????height: 30px; ???????} ???</style></head><body><!--给一个最外层的div，做父级管理--><div id="div1"> ???<!--这层div是管理楼主的--> ???<div id="div1-1"> ???????<!--这是楼主的头像--> ???????<img src="../img/3.jpg" alt="头像"/> ???????<span>楼主的名字</span> ???????<!--给时间一个右浮动，跑到右边去--> ???????<span class="y">2017-09-20 11:00:00</span> ???????<!--这个div是管理楼主发表的内容的--> ???????<div class="content"> ???????????说出你的名字，我好记住。。。。 ???????</div> ???</div> ???<!--这下面的div是路人评论的--> ???<div class="div1-2"> ???????<!--路人的头像--> ???????<img src="../img/4.png" alt="路人头像"/> ???????<span>路人的名字</span> ???????<!--给时间一个右浮动，跑到右边去--> ???????<span class="y">2017-09-20 11:01:00</span> ???????<!--这个div是管理路人发表的内容的--> ???????<div class="content"> ???????????我是路人甲，我是第一个评论的。 ???????</div> ???</div></div><!--这个div放在下面，给一个输入框和发送--><div id="div2"> ???<p>请在下方输入评论内容并发送</p> ???<!--给input表单元素一个id，jQuery里调用--> ???<input id="neirong" type="text"/> ???<!--给a标签一个点击事件--> ???<a onclick="fasong()" href="javascript:;">发送</a></div><script> ???function fasong(){ ???????//判断发送的内容 ???????if($("#neirong").val() == ‘‘){ ???????????//如果发送的内容为空，则给出提示，并返回false 结束代码运行 ???????????alert(‘内容不能为空‘); ???????????return false; ???????} ???????//找到id为div1的元素，然后用after()方法，在它所有元素的最后面添加以下的内容 ???????$("#div1").append( ???????????‘<div class="div1-2">‘ + ???????????‘<img src="../img/4.png" alt="路人头像"/>‘ + ???????????‘<span style="margin-left: 8px;">路人的名字</span>‘ + ???????????‘<span class="y">2017-09-20 11:01:00</span>‘ + ???????????‘<div class="content">‘ + ???????????$("#neirong").val() + ???????????‘</div>‘ ???????); ???????//内容发表成功后，就设置成没有内容 ???????$("#neirong").val(‘‘); ???}</script></body></html>打开页面测试代码，输入内容，如果内容为空，则给出提示，如果有内容，则添加相应的所有元素和内容。不过这里，因为是只有前端，没有后台数据库的原因，并且老师给出的操作，这里的头像、姓名、时间，都是固定的，只有内容是我们输入的内容，是可变化的。
我们在页面，检查源码，可以看到，我们添加的内容，它是在id为div1最后出现的，这就是append()方法，在被选中元素的结尾处添加内容，记住，是结尾处，所以说，添加的内容永远都是在最后面出现的，这样就能实现页面静态添加了。以后再使用ajax这类异步访问后台，添加数据库，一切OK！就能实现动态添加，而并不用总是刷新页面提交，给用户给高效的体验。
老师这里演示的是append()，其意思是“在被选中的元素结尾处添加内容”，同学们只要掌握这一个，那么其他三个都是一样的，只是位置不一样罢了。
不过，使用此方法添加内容，也有一些问题的，并非bug，所以问题不大，但是做一些功能或者效果什么的，就会存在一定的问题，有兴趣的同学，可以自己尝试，也可以发问。
第二十三篇 jQuery 学习5 添加元素
原文地址：http://www.cnblogs.com/longfeng995/p/7590466.html