jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

jQuery 在元素中添加插入内容的方法和区别，整理成表格，省的每次都要翻：

jQuery方法	解释
after()	在被选元素之后插入指定内容
insertAfter()	在被选元素之后插入 HTML 标记或已有的元素。 如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
append()	在被选元素的结尾（仍然在内部）插入指定内容
appendTo()	在被选元素的结尾（仍然在内部）插入 HTML 标记或已有的元素。
before()	在被选元素之前插入指定内容
insertBefore()	在被选元素之前插入 HTML 标记或已有的元素。 如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
prepend()	在被选元素的开头（仍然在内部）插入指定内容
prependTo()	在被选元素的开头（仍然在内部）插入 HTML 标记或已有的元素

千言解释不如一图示意：

具体代码：

<div class="target">
This is the target div to which new elements are associated using jQuery
</div>

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);