前端頁面使用JavaScript（jQuery）無非就那些使用場景：動畫，Ajax，內(nèi)容填充和渲染等。其中內(nèi)容填充的方法通常使用添加元素的方法或者添加內(nèi)容的方法。以jQuery為例，可以使用after()，append()，appendTo()等方法來插入新內(nèi)容。但它們之間也有著一定的區(qū)別。今天小編就來講講jQuery中這幾種插入方法的區(qū)別吧！
append()
append（）方法是一個往被選元素結(jié)尾插入內(nèi)容的方法。注意，他是往一個元素的內(nèi)容結(jié)尾插入內(nèi)容，所以插入的內(nèi)容還在這個元素中。舉個例子，有如下HTML結(jié)構(gòu)：
<div>
<ul>
<li>這是原本的內(nèi)容</li>
</ul>
</div>我們對li元素使用append方法，插入一段新內(nèi)容：?這是新內(nèi)容?該結(jié)構(gòu)就會變成：
<div>
<ul>
<li>這是原本的內(nèi)容這是新內(nèi)容</li>
</ul>
</div>如果插入的內(nèi)容是HTML標簽，那么它會被正常的渲染（展示在頁面上）
與append()方法對應(yīng)地，有一個prepend()方法，可以用來在被選元素的開頭插入內(nèi)容。
after()
after()方法是一個往被選元素后插入內(nèi)容的方法。注意，他是往一個元素的后面插入內(nèi)容，所以插入的內(nèi)容不在這個元素中。
舉個例子，有如下HTML結(jié)構(gòu)：
<div>
<ul>
<li>這是原本的內(nèi)容</li>
</ul>
</div>我們對li元素使用after方法，插入一段新內(nèi)容：?這是新內(nèi)容?該結(jié)構(gòu)就會變成：
<div>
<ul>
<li>這是原本的內(nèi)容</li>這是新內(nèi)容
</ul>
</div>對li元素使用after()方法，可以理解為對它的父元素使用append方法。
如果插入的內(nèi)容是HTML標簽，那么它會被正常的渲染（展示在頁面上）
與after()方法對應(yīng)地，有一個before()方法，可以用來在被選元素前插入內(nèi)容。
如果對HTML的偽元素/偽類有所了解，實際上after方法的使用上與給偽元素/偽類設(shè)置content是一樣的。
appendTo()
appendTo()方法是一個往被選元素結(jié)尾插入元素的方法。注意，他是往一個元素的內(nèi)容結(jié)尾插入元素，所以插入的元素還在這個元素中。舉個例子，有如下HTML結(jié)構(gòu)：
<div>
<ul>
<li>這是原本的內(nèi)容</li>
</ul>
</div>我們對li元素使用appendTo()方法，插入一段新內(nèi)容：?<p>這是新內(nèi)容</p>?該結(jié)構(gòu)就會變成：
<div>
<ul>
<li>這是原本的內(nèi)容<p>這是新內(nèi)容</p></li> </ul>
</div>
注意:appendTo(）方法與append(）方法很相似，但有一定的區(qū)別，appendTo()方法插入的內(nèi)容必須是HTML標簽，插入后就是一個元素，而append插入的只是文本，如果文本是HTML標簽會被渲染。
與appendTo()方法對應(yīng)地，有一個prependTo()方法，可以用來在被選元素的開頭插入元素。
insertAfter() 方法
after()方法是一個往被選元素后插入元素的方法。注意，他是往一個元素的后面插入元素，所以插入的元素不在這個元素中。
舉個例子，有如下HTML結(jié)構(gòu)：
<div>
<ul>
<li>這是原本的內(nèi)容</li>
</ul>
</div>我們對li元素使用insertAfter方法，插入一段新內(nèi)容：?<p>這是新內(nèi)容</p>?該結(jié)構(gòu)就會變成：
<div>
<ul>
<li>這是原本的內(nèi)容</li><p>這是新內(nèi)容</p>
</ul>
</div>對li元素使用insertAfter()方法，可以理解為對它的父元素使用appendTo()方法。
注意:insertAfter(）方法與after(）方法很相似，但有一定的區(qū)別，insertAfter()方法插入的內(nèi)容必須是HTML標簽，插入后就是一個元素，而after()插入的只是文本，如果文本是HTML標簽會被渲染。
與insertAfter()方法對應(yīng)地，有一個insertBrfore()方法，可以用來在被選元素前插入元素。
總結(jié)
以上就是四種（八種）jQuery插入方法的區(qū)別，詳細的使用方法下附鏈接，小伙伴們可以前往相應(yīng)的手冊進行查看。
