夏日博客

A-A+

jquery中append、prepend、before、after方法使用例子

2016年01月10日 前端设计 暂无评论 阅读 7 views 次

在jquery中append、prepend、before、after方法是对数据元素节点的操作系列方法了，这些方法大家了解吗？如果不了解就可以和夏日博客小编来看看它们用法。

一、after()和before()方法的区别

after()——其方法是将方法里面的参数添加到jquery对象后面去；

如：A.after(B)的意思是将B放到A后面去；

before()——其方法是将方法里面的参数添加到jquery对象前面去。

如：A.before(B)的意思是将A放到B前面去；

二、insertAfter()和insertBefore()的方法的区别

其实是将元素对调位置；

可以是页面上已有元素；也可以是动态添加进来的元素。

如：A.insertAfter(B);即将A元素调换到B元素后面；

如:

  1. <span>CC</span><p>HELLO</p>  

使用$("span").insertAfter($("p"))后，就变为:

  1. <p>HELLO</p><span>CC</span>  

了。两者位置调换了

三、append()和appendTo()方法的区别

append()——其方法是将方法里面的参数添加到jquery对象中来；

如：A.append(B)的意思是将B放到A中来，后面追加,A的子元素的最后一个位置；

appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

如：A.appendTo(B)的意思是将A放到B中去，后面追加,B的子元素的最后一个位置；

四、prepend()和prependTo()方法的区别

append()——其方法是将方法里面的参数添加到jquery对象中来；

如：A.append(B)的意思是将B放到A中来，插入到A的子元素的第一个位置；

appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

如：A.appendTo(B)的意思是将A放到B中去，插入到B的子元素的第一个位置；

例子:

1、insert局部方法

  1. /** 
  2.  * 在父级元素上操作DOM 
  3.  * @param {Object} parent   父级元素，可以是element，也可以是Yquery对象 
  4.  * @param {String} position 位置: beforebegin/afterbegin/beforeend/afterend 
  5.  * @param {*}      any      任何：string/text/object 
  6.  * @param {Number} index    序号，如果大于0则复制节点 
  7.  * @return {Undefined} 
  8.  * @version 1.0 
  9.  * 2013年12月2日17:08:26 
  10.  */  
  11. function _insert(parent, position, any, index) {  
  12.     if ($.isFunction(any)) {  
  13.         any = any.call(parent);  
  14.     }  
  15.     // 字符串  
  16.     if ($.isString(any)) {  
  17.         if (regTag.test(any)) {  
  18.             parent.insertAdjacentHTML(position, any);  
  19.         } else {  
  20.             parent.insertAdjacentText(position, any);  
  21.         }  
  22.     }  
  23.     // 数字  
  24.     else if ($.isNumber(any)) {  
  25.         parent.insertAdjacentText(position, any);  
  26.     }  
  27.     // 元素  
  28.     else if ($.isElement(any)) {  
  29.         parent.insertAdjacentElement(position, index > 0 ? any.cloneNode(!0) : any);  
  30.     }  
  31.     // Yquery  
  32.     else if (_isYquery(any)) {  
  33.         any.each(function() {  
  34.             _insert(parent, position, this);  
  35.         });  
  36.     }  
  37. }  

2、append、prepend、before、after

  1. $.fn = {  
  2.     /** 
  3.      * 追插 
  4.      * 将元素后插到当前元素（集合）内 
  5.      * @param {String/Element/Function} any 
  6.      * @return this 
  7.      * @version 1.0 
  8.      * 2013年12月29日1:44:15 
  9.      */  
  10.     append: function(any) {  
  11.         return this.each(function(index) {  
  12.             _insert(this, 'beforeend', any, index);  
  13.         });  
  14.     },  
  15.     /** 
  16.      * 补插 
  17.      * 将元素前插到当前元素（集合）内 
  18.      * @param {String/Element/Function} any 
  19.      * @return this 
  20.      * @version 1.0 
  21.      * 2013年12月29日1:44:15 
  22.      */  
  23.     prepend: function(any) {  
  24.         return this.each(function(index) {  
  25.             _insert(this, 'afterbegin', any, index);  
  26.         });  
  27.     },  
  28.     /** 
  29.      * 前插 
  30.      * 将元素前插到当前元素（集合）前 
  31.      * @param {String/Element/Function} any 
  32.      * @return this 
  33.      * @version 1.0 
  34.      * 2013年12月29日1:44:15 
  35.      */  
  36.     before: function(any) {  
  37.         return this.each(function(index) {  
  38.             _insert(this, 'beforebegin', any, index);  
  39.         });  
  40.     },  
  41.     /** 
  42.      * 后插 
  43.      * 将元素后插到当前元素（集合）后 
  44.      * @param {String/Element/Function} any 
  45.      * @return this 
  46.      * @version 1.0 
  47.      * 2013年12月29日1:44:15 
  48.      */  
  49.     after: function(any) {  
  50.         return this.each(function(index) {  
  51.             _insert(this, 'afterend', any, index);  
  52.         });  
  53.     }  
  54. };  

3、prependTo、prependTo、insertBefore、insertAfter

这些带后缀的与上面的不同的是，返回的结果不一样。如：

  1. $('#demo').append('<a/>');  
  2. // => 返回的是 $('#demo')  
  3. $('<a/>').appendTo($('#demo'));  
  4. // => 返回的是$('a');  

因此两者的关系只是返回结果不一样，其他的都一样，可以这么解决：

  1. _each({  
  2.     appendTo: 'append',  
  3.     prependTo: 'prepend',  
  4.     insertBefore: 'before',  
  5.     insertAfter: 'after'  
  6. }, function(key, val) {  
  7.     $.fn[key] = function(selector) {  
  8.         this.each(function() {  
  9.             $(selector)[val](this);  
  10.         });  
  11.         return this;  
  12.     };  
  13. });  
标签：

给我留言