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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
mocha的时序规则讲解
Feb 16 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
vue 授权获取微信openId操作
Nov 13 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
文件上传类
2006/10/09 PHP
用PHP创建PDF中文文档
2006/10/09 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
python中的字典使用分享
2016/07/31 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python异常触发及自定义异常类解析
2019/08/06 Python
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
出国签证在职证明
2014/01/16 职场文书
医学生自我评价
2014/01/27 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
员工工作及收入证明
2014/10/28 职场文书
2015年前台接待工作总结
2015/05/04 职场文书