2019独角兽企业重金招聘Python工程师标准>>>
html方法，给元素添加html代码或者清空html代码（参数为空字符串）；
append向元素的末尾添加html代码；
appendTo这个方法跟append方法的很像，只是要添加的html代码的目标有所不一样；
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入； before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入；
insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；
empty清空元素内部的html代码，它只是清空内部的html代码，但是标记仍然留在DOM中；
remove从DOM中移除整个元素； 需要指出的重要的一点：JQuery会自动的完善html代码，也就是说，假如你要执行以下操作
[javascript] view plain copy
$('content').append('<p>CSDN'); [javascript] view plain copy
$('content').append('<p>CSDN'); 那么实际插入到标记中的html代码是
[html] view plain copy
<p>CSDN</p> [html] view plain copy
<p>CSDN</p> 这一点需要特别注意，很多教程之类的只是讲解这些函数的动作，但是会忽略一些细节；
下面让我来详细解释一下每个函数的作用以及它是如何工作的，会产生什么效果。以后的代码我都对这样的一个模板来操作，代码以及效果如下：
[css] view plain copy
<style type="text/css"> .box { width:100px; height:100px; border:2px solid red; padding:10px; text-align:center; } .child { width:70px; height:20px; border:2px solid red; text-align:center; } </style> [css] view plain copy
<style type="text/css"> .box { width:100px; height:100px; border:2px solid red; padding:10px; text-align:center; } .child { width:70px; height:20px; border:2px solid red; text-align:center; } </style> [html] view plain copy
<div id="top" class="box"> <span>top</span> </div> <div id="middle" class="box"> <span>middle</span> </div> <div id="bottom" class="box"> <span>bottom</span> </div> [html] view plain copy
<div id="top" class="box"> <span>top</span> </div> <div id="middle" class="box"> <span>middle</span> </div> <div id="bottom" class="box"> <span>bottom</span> </div>
原始的效果图：
一、html函数的使用
我们执行以下语句：
[javascript] view plain copy
$('#middle').html('<div class="child">html()'); [javascript] view plain copy
$('#middle').html('<div class="child">html()'); 效果图如下：
再来看看最终的代码：
这里是完整的html代码，也就是说JQuery为我们补全了代码，这一点需要注意，JQuery为我们带来了方便，但是当我们需要精确控制html代码的时候，需要注意一点。
html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。
二、append、appendTo函数的使用
执行以下语句：
[javascript] view plain copy
$('#middle').append('<div class="child">append()</div>'); [javascript] view plain copy
$('#middle').append('<div class="child">append()</div>'); 注：为了编程规范，html代码我之后都使用完整的html标记。
效果图如下：
最终的代码：
append函数将html附加到了<span>middle</span>之后。
appendTo函数的效果和append一样，只不过是写法不一样：
[javascript] view plain copy
$('<div class="child">append()</div>').appendTo('#middle'); [javascript] view plain copy
$('<div class="child">append()</div>').appendTo('#middle'); appendTo首先将html代码封装成jquery对象，然后添加到指定的目标位置。
三、after、insertAfter函数的使用
执行以下语句：
[javascript] view plain copy
$('#middle').after('<div class="child">after()</div>'); [javascript] view plain copy
$('#middle').after('<div class="child">after()</div>'); 效果图：
after函数的作用是将html代码插入指定元素的后面，如果后面有元素，则将其后移，然后插入html代码。
insertAfter函数与after函数的作用是一样的，上面代码的insertAfter版本为：
[javascript] view plain copy
$('<div class="child">after()</div>').after('#middle'); [javascript] view plain copy
$('<div class="child">after()</div>').after('#middle'); 四、before、insertBefore函数的使用
这连个函数的原理与after、insertAfter是一样的，只不过before、insertBefore是插入到目标元素的前面，大家可以自行参考after、insertAfter。
五、empty、remove函数的使用
执行以下代码：
[javascript] view plain copy
$('#middle').empty(); [javascript] view plain copy
$('#middle').empty(); 效果图：
再来看看最终的html代码：
[html] view plain copy
<div id="middle" class="box"></div> [html] view plain copy
<div id="middle" class="box"></div> 里面的html代码被清空了，然而元素本身还在。
执行以下语句：
[javascript] view plain copy
$('#middle').remove(); [javascript] view plain copy
$('#middle').remove(); 效果图：
最终的html代码：
[html] view plain copy
<div id="top" class="box"> <span>top</span> </div> <div id="bottom" class="box"> <span>bottom</span> </div> [html] view plain copy
<div id="top" class="box"> <span>top</span> </div> <div id="bottom" class="box"> <span>bottom</span> </div>
转载于:https://my.oschina.net/baiduapi/blog/526835
总结
以上是生活随笔为你收集整理的JQuery中html、append、appendTo、after、insertAfter系列方法的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
