JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

时间:2022-03-06 14:26:15

前端开发的,免不了的要操作页面HTML代码,jQuery中提供了许多非常便捷的方法,使我们很方便的操作HTML代码,这也许就是选择JQuery的原因吧。

  那么让我们来看看有常用的有哪些方法:

  1. html方法,给元素添加html代码或者清空html代码(参数为空字符串);
  2. append向元素的末尾添加html代码;
  3. appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样;
  4. after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入;
  5. before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入;
  6. insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入;
  7. insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
  8. empty清空元素内部的html代码,它只是清空内部的html代码,但是标记仍然留在DOM中;
  9. remove从DOM中移除整个元素;

  需要指出的重要的一点:JQuery会自动的完善html代码,也就是说,假如你要执行以下操作

[javascript] view plaincopy
  1. $('content').append('<p>CSDN');  
[javascript] view plain copy
  1. $('content').append('<p>CSDN');  

那么实际插入到标记中的html代码是

[html] view plaincopy
  1. <p>CSDN</p>  
[html] view plain copy
  1. <p>CSDN</p>  

  这一点需要特别注意,很多教程之类的只是讲解这些函数的动作,但是会忽略一些细节;

  下面让我来详细解释一下每个函数的作用以及它是如何工作的,会产生什么效果。以后的代码我都对这样的一个模板来操作,代码以及效果如下:

[css] view plaincopy
  1. <style type="text/css">  
  2.          .box  
  3.          {  
  4.              width:100px;   
  5.              height:100px;   
  6.              border:2px solid red;  
  7.              padding:10px;  
  8.              text-align:center;  
  9.          }  
  10.          .child  
  11.          {  
  12.              width:70px;   
  13.              height:20px;   
  14.              border:2px solid red;  
  15.              text-align:center;  
  16.          }  
  17.     </style>  
[css] view plain copy
  1. <style type="text/css">  
  2.          .box  
  3.          {  
  4.              width:100px;   
  5.              height:100px;   
  6.              border:2px solid red;  
  7.              padding:10px;  
  8.              text-align:center;  
  9.          }  
  10.          .child  
  11.          {  
  12.              width:70px;   
  13.              height:20px;   
  14.              border:2px solid red;  
  15.              text-align:center;  
  16.          }  
  17.     </style>  
[html] view plaincopy
  1. <div id="top" class="box">  
  2.     <span>top</span>  
  3. </div>  
  4. <div id="middle" class="box">  
  5.     <span>middle</span>  
  6. </div>  
  7. <div id="bottom" class="box">  
  8.     <span>bottom</span>  
  9. </div>  
[html] view plain copy
  1. <div id="top" class="box">  
  2.     <span>top</span>  
  3. </div>  
  4. <div id="middle" class="box">  
  5.     <span>middle</span>  
  6. </div>  
  7. <div id="bottom" class="box">  
  8.     <span>bottom</span>  
  9. </div>  


 

  原始的效果图:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  一、html函数的使用

  我们执行以下语句:

[javascript] view plaincopy
  1. $('#middle').html('<div class="child">html()');  
[javascript] view plain copy
  1. $('#middle').html('<div class="child">html()');  

  效果图如下:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  再来看看最终的代码:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  这里是完整的html代码,也就是说JQuery为我们补全了代码,这一点需要注意,JQuery为我们带来了方便,但是当我们需要精确控制html代码的时候,需要注意一点。

  html函数的作用原理首先是移除目标元素内部的html代码,然后将新代码添加到目标元素。

二、append、appendTo函数的使用

  执行以下语句:

[javascript] view plaincopy
  1. $('#middle').append('<div class="child">append()</div>');  
[javascript] view plain copy
  1. $('#middle').append('<div class="child">append()</div>');  

  注:为了编程规范,html代码我之后都使用完整的html标记。

  效果图如下:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  最终的代码:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  append函数将html附加到了<span>middle</span>之后。

  appendTo函数的效果和append一样,只不过是写法不一样:

[javascript] view plaincopy
  1. $('<div class="child">append()</div>').appendTo('#middle');  
[javascript] view plain copy
  1. $('<div class="child">append()</div>').appendTo('#middle');  

  appendTo首先将html代码封装成jquery对象,然后添加到指定的目标位置。

三、after、insertAfter函数的使用

  执行以下语句:

[javascript] view plaincopy
  1. $('#middle').after('<div class="child">after()</div>');  
[javascript] view plain copy
  1. $('#middle').after('<div class="child">after()</div>');  

  效果图:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  after函数的作用是将html代码插入指定元素的后面,如果后面有元素,则将其后移,然后插入html代码。

  insertAfter函数与after函数的作用是一样的,上面代码的insertAfter版本为:

[javascript] view plaincopy
  1. $('<div class="child">after()</div>').after('#middle');  
[javascript] view plain copy
  1. $('<div class="child">after()</div>').after('#middle');  

  四、before、insertBefore函数的使用

  这连个函数的原理与after、insertAfter是一样的,只不过before、insertBefore是插入到目标元素的前面,大家可以自行参考after、insertAfter。

  五、empty、remove函数的使用

  执行以下代码:

[javascript] view plaincopy
  1. $('#middle').empty();  
[javascript] view plain copy
  1. $('#middle').empty();  

  效果图:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  再来看看最终的html代码:

[html] view plaincopy
  1. <div id="middle" class="box"></div>  
[html] view plain copy
  1. <div id="middle" class="box"></div>  

  里面的html代码被清空了,然而元素本身还在。

  执行以下语句:

[javascript] view plaincopy
  1. $('#middle').remove();  
[javascript] view plain copy
  1. $('#middle').remove();  

  效果图:

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用

  最终的html代码:

[html] view plaincopy
  1. <div id="top" class="box">  
  2.     <span>top</span>  
  3. </div>  
  4. <div id="bottom" class="box">  
  5.     <span>bottom</span>  
  6. </div>  
[html] view plain copy
  1. <div id="top" class="box">  
  2.     <span>top</span>  
  3. </div>  
  4. <div id="bottom" class="box">  
  5.     <span>bottom</span>  
  6. </div>  

  中间的元素整个被删除了,也就是说remove方法将目标元素整个的从DOM中移除。