这六个都是在指定位置插入元素，不过插入位置不同，书写方法不同，并且两两对应。

before和insertBefore

<div id="content" style="background-color: red;">我是原来的content</div>
<script src="./jquery-1.11.1.js"></script>
<script>
     $("#content").before("<span>我是新插入的元素</span>")
     //或者用insertBefore,二者效果相同，只不过写法不同
     //$("<span>我是新插入的元素</span>").insertBefore("#content")
</script>

//语句执行后的HTML结构如下
<span>我是新插入的元素</span>
<div id="content" style="background-color: red;">我是原来的content</div>

after和insertAfter

这两个和before、insertBefore同理，只不过位置是在被选中元素的后面

<div id="content" style="background-color: red;">我是原来的content</div>
<script src="./jquery-1.11.1.js"></script>
<script>
     $("#content").after("<span>我是新插入的元素</span>")
     //$("<span>我是新插入的元素</span>").insertAfter("#content")
</script>

//语句执行后的HTML结构如下
<div id="content" style="background-color: red;">我是原来的content</div>
<span>我是新插入的元素</span>

append和appendTo 

<div id="out-div" style="border: 2px solid red;">
        <h1>我是原来out-div中的子元素h1</h1>
 </div>
 <script src="./jquery-1.11.1.js"></script>
 <script>
     $("<p>我是被加到out-div中的p元素</p>").appendTo("#out-div");
     //$("#out-div").append("<p>我是被加到out-div中的p元素</p>");
 </script>

//HTML中的结构如下
<div id="out-div" style="border: 2px solid red;">
        <h1>我是原来out-div中的子元素h1</h1>
        <p>我是被加到out-div中的p元素</p>
</div>