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

/
  在父级元素上操作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);
    });
  }
}

$.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);
    });
  }
};

$('#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;
  };
});

<script type="text/javascript" src="http://mon.jb51./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>