jQuery怎么添加内容？JQuery插入内容介绍！

前端页面使用 JavaScript（jQuery）无非就那些使用场景：动画，Ajax，内容填充和渲染等。其中内容填充的方法通常使用添加元素的方法或者添加内容的方法。以 jQuery 为例，可以使用 after()，append()，appendTo()等方法来插入新内容。但它们之间也有着一定的区别。今天小编就来讲讲 jQuery 中这几种插入方法的区别吧！

append()

append（）方法是一个往被选元素结尾插入内容的方法。注意，他是往一个元素的内容结尾插入内容，所以插入的内容还在这个元素中。举个例子，有如下 HTML 结构：

    

        
这是原本的内容
    

我们对 li 元素使用 append 方法，插入一段新内容：​这是新内容​该结构就会变成：

    

        
这是原本的内容这是新内容
    

如果插入的内容是 HTML 标签，那么它会被正常的渲染（展示在页面上）

 与 append()方法对应地，有一个 prepend()方法，可以用来在被选元素的开头插入内容。

after()

after()方法是一个往被选元素后插入内容的方法。注意，他是往一个元素的后面插入内容，所以插入的内容不在这个元素中。

举个例子，有如下 HTML 结构：

    

        
这是原本的内容
    

我们对 li 元素使用 after 方法，插入一段新内容：​这是新内容​该结构就会变成：

   

        
这是原本的内容 
 这是新内容
    

对 li 元素使用 after()方法，可以理解为对它的父元素使用 append 方法。

如果插入的内容是 HTML 标签，那么它会被正常的渲染（展示在页面上）

与 after()方法对应地，有一个 before()方法，可以用来在被选元素前插入内容。

如果对 HTML 的 伪元素 / 伪类 有所了解，实际上 after 方法的使用上与给 伪元素 / 伪类 设置 content 是一样的。

appendTo()

appendTo()方法是一个往被选元素结尾插入元素的方法。注意，他是往一个元素的内容结尾插入元素，所以插入的元素还在这个元素中。举个例子，有如下 HTML 结构：

    

        
这是原本的内容
    

我们对 li 元素使用 appendTo()方法，插入一段新内容：​

​该结构就会变成：

    

        
这是原本的内容 
 这是新内容
    

注意:appendTo(）方法与 append(）方法很相似，但有一定的区别，appendTo()方法插入的内容必须是 HTML 标签，插入后就是一个元素，而 append 插入的只是文本，如果文本是 HTML 标签会被渲染。

  与 appendTo()方法对应地，有一个 prependTo()方法，可以用来在被选元素的开头插入元素。

 insertAfter() 方法

after()方法是一个往被选元素后插入元素的方法。注意，他是往一个元素的后面插入元素，所以插入的元素不在这个元素中。

举个例子，有如下 HTML 结构：

    

        
这是原本的内容
    

我们对 li 元素使用 insertAfter 方法，插入一段新内容：​

​该结构就会变成：

   

        
这是原本的内容 
 这是新内容
    

对 li 元素使用 insertAfter()方法，可以理解为对它的父元素使用 appendTo()方法。

注意:insertAfter(）方法与 after(）方法很相似，但有一定的区别，insertAfter()方法插入的内容必须是 HTML 标签，插入后就是一个元素，而 after()插入的只是文本，如果文本是 HTML 标签会被渲染。

  与 insertAfter()方法对应地，有一个 insertBrfore()方法，可以用来在被选元素前插入元素。

总结

以上就是四种（八种）jQuery 插入方法的区别，详细的使用方法下附链接，小伙伴们可以前往相应的手册进行查看。

append() 方法 / prepend() 方法 

after() 方法 /before() 方法 

appendTo() 方法 / prependTo() 方法 

insertAfter() 方法 /insertBefore() 方法