jquery 追加元素append、prepend、before、after用法与区别分析


Posted in Javascript onDecember 02, 2016

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

    after()——其方法是将方法里面的参数添加到jquery对象后面去;
    如:A.after(B)的意思是将B放到A后面去;
    before()——其方法是将方法里面的参数添加到jquery对象前面去。
    如:A.before(B)的意思是将A放到B前面去; 
 
二、insertAfter()和insertBefore()的方法的区别

    其实是将元素对调位置;
    可以是页面上已有元素;也可以是动态添加进来的元素。
    如:A.insertAfter(B);即将A元素调换到B元素后面;
    如<span>CC</span><p>HELLO</p>使用$("span").insertAfter($("p"))后,就变为<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局部方法

/**
 * 在父级元素上操作DOM
 * @param {Object} parent  父级元素,可以是element,也可以是Yquery对象
 * @param {String} position 位置: beforebegin/afterbegin/beforeend/afterend
 * @param {*}   any   任何:string/text/object
 * @param {Number} index  序号,如果大于0则复制节点
 * @return {Undefined}
 * @version 1.0
 * 2013年12月2日17:08:26
 */
function _insert(parent, position, any, index) {
  if ($.isFunction(any)) {
    any = any.call(parent);
  }
  // 字符串
  if ($.isString(any)) {
    if (regTag.test(any)) {
      parent.insertAdjacentHTML(position, any);
    } else {
      parent.insertAdjacentText(position, any);
    }
  }
  // 数字
  else if ($.isNumber(any)) {
    parent.insertAdjacentText(position, any);
  }
  // 元素
  else if ($.isElement(any)) {
    parent.insertAdjacentElement(position, index > 0 ? any.cloneNode(!0) : any);
  }
  // Yquery
  else if (_isYquery(any)) {
    any.each(function() {
      _insert(parent, position, this);
    });
  }
}

2、append、prepend、before、after

$.fn = {
  /**
   * 追插
   * 将元素后插到当前元素(集合)内
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  append: function(any) {
    return this.each(function(index) {
      _insert(this, 'beforeend', any, index);
    });
  },
  /**
   * 补插
   * 将元素前插到当前元素(集合)内
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  prepend: function(any) {
    return this.each(function(index) {
      _insert(this, 'afterbegin', any, index);
    });
  },
  /**
   * 前插
   * 将元素前插到当前元素(集合)前
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  before: function(any) {
    return this.each(function(index) {
      _insert(this, 'beforebegin', any, index);
    });
  },
  /**
   * 后插
   * 将元素后插到当前元素(集合)后
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  after: function(any) {
    return this.each(function(index) {
      _insert(this, 'afterend', any, index);
    });
  }
};

3、prependTo、prependTo、insertBefore、insertAfter
这些带后缀的与上面的不同的是,返回的结果不一样。如:

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

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

_each({
  appendTo: 'append',
  prependTo: 'prepend',
  insertBefore: 'before',
  insertAfter: 'after'
}, function(key, val) {
  $.fn[key] = function(selector) {
    this.each(function() {
      $(selector)[val](this);
    });
    return this;
  };
});

jquery 追加元素的方法(append prepend after before 的区别)

append() 方法在被选元素的结尾插入内容。

prepend() 方法在被选元素的开头插入内容。

after() 方法在被选元素之后插入内容。

before() 方法在被选元素之前插入内容。

<script type="text/javascript" src="http://common.3water.com/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
  <ul>
    <li>第一个li标签</li>
  </ul>
</div>

<script>

  //append
  $('.testdiv ul').append('<li>append 插入的li</li>');
  //prepend
  $('.testdiv ul').prepend('<li>prepend 插入的li</li>');
  //after
  $('.testdiv ul').after('<li>after 插入的li</li>');
  //before
  $('.testdiv ul').before('<li>before 插入的li</li>');

</script>

效果图

jquery 追加元素append、prepend、before、after用法与区别分析

html结构图

jquery 追加元素append、prepend、before、after用法与区别分析

Javascript 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 #Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 #Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 #Javascript
利用JQuery阻止事件冒泡
Dec 01 #Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 #Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 #Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 #Javascript
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php Ajax乱码
2008/04/09 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
php写的AES加密解密类分享
2014/06/20 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python base64编码解码实例
2015/06/21 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
三个python爬虫项目实例代码
2019/12/28 Python
python和php哪个容易学
2020/06/19 Python
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
环境科学专业研究生求职信
2013/10/02 职场文书
英文求职信写作小建议
2014/02/16 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
python编写函数注意事项总结
2021/03/29 Python
Redis三种集群模式详解
2021/10/05 Redis