前端页面使用JavaScript（jQuery）无非就那些使用场景：动画，Ajax，内容填充和渲染等。其中内容填充的方法通常使用添加元素的方法或者添加内容的方法。以jQuery为例，可以使用after()，append()，appendTo()等方法来插入新内容。但它们之间也有着一定的区别。今天小编就来讲讲jQuery中这几种插入方法的区别吧！
append()
append（）方法是一个往被选元素结尾插入内容的方法。注意，他是往一个元素的内容结尾插入内容，所以插入的内容还在这个元素中。举个例子，有如下HTML结构：
<div>
<ul>
<li>这是原本的内容</li>
</ul>
</div>我们对li元素使用append方法，插入一段新内容：这是新内容该结构就会变成：
<div>
<ul>
<li>这是原本的内容这是新内容</li>
</ul>
</div>如果插入的内容是HTML标签，那么它会被正常的渲染（展示在页面上）
与append()方法对应地，有一个prepend()方法，可以用来在被选元素的开头插入内容。
after()
after()方法是一个往被选元素后插入内容的方法。注意，他是往一个元素的后面插入内容，所以插入的内容不在这个元素中。
举个例子，有如下HTML结构：
<div>
<ul>
<li>这是原本的内容</li>
</ul>
</div>我们对li元素使用after方法，插入一段新内容：这是新内容该结构就会变成：
<div>
<ul>
<li>这是原本的内容</li>这是新内容
</ul>
</div>对li元素使用after()方法，可以理解为对它的父元素使用append方法。
如果插入的内容是HTML标签，那么它会被正常的渲染（展示在页面上）
与after()方法对应地，有一个before()方法，可以用来在被选元素前插入内容。
appendTo()
appendTo()方法是一个往被选元素结尾插入元素的方法。注意，他是往一个元素的内容结尾插入元素，所以插入的元素还在这个元素中。举个例子，有如下HTML结构：
<div>
<ul>
<li>这是原本的内容</li>
</ul>
</div>我们对li元素使用appendTo()方法，插入一段新内容：<p>这是新内容</p>该结构就会变成：
<div>
<ul>
<li>这是原本的内容<p>这是新内容</p></li> </ul>
</div>
注意:appendTo(）方法与append(）方法很相似，但有一定的区别，appendTo()方法插入的内容必须是HTML标签，插入后就是一个元素，而append插入的只是文本，如果文本是HTML标签会被渲染。
与appendTo()方法对应地，有一个prependTo()方法，可以用来在被选元素的开头插入元素。
insertAfter() 方法
after()方法是一个往被选元素后插入元素的方法。注意，他是往一个元素的后面插入元素，所以插入的元素不在这个元素中。
举个例子，有如下HTML结构：
<div>
<ul>
<li>这是原本的内容</li>
</ul>
</div>我们对li元素使用insertAfter方法，插入一段新内容：<p>这是新内容</p>该结构就会变成：
<div>
<ul>
<li>这是原本的内容</li><p>这是新内容</p>
</ul>
</div>对li元素使用insertAfter()方法，可以理解为对它的父元素使用appendTo()方法。
注意:insertAfter(）方法与after(）方法很相似，但有一定的区别，insertAfter()方法插入的内容必须是HTML标签，插入后就是一个元素，而after()插入的只是文本，如果文本是HTML标签会被渲染。
与insertAfter()方法对应地，有一个insertBrfore()方法，可以用来在被选元素前插入元素。
总结
以上就是四种（八种）jQuery插入方法的区别，详细的使用方法下附链接，小伙伴们可以前往相应的手册进行查看。
