快捷導(dǎo)航

jQuery和JavaScript節(jié)點(diǎn)插入元素的方法對比

更新時(shí)間：2016年11月18日 11:39:09 作者：胖不了的瘦子

本文主要介紹jQuery與JavaScript節(jié)點(diǎn)的插入方法，以及他們的具體代碼實(shí)現(xiàn)方法，大家可以對比下他們之間的不同，希望對大家編寫代碼有所幫助

二、插入元素：

<div>
<p>面朝大海，春暖花開</p>
</div>

(一)、jQuery方法

1、在節(jié)點(diǎn)內(nèi)部插入:

方法	說明
append()	向每個(gè)匹配的元素內(nèi)部追加內(nèi)容
appendTo()	把所有的元素追加到另一個(gè)指定的元素集合中，實(shí)際上是顛倒了append()的用法。如$(A).append(B)與$(B).appendto(A)是等價(jià)的
prepend()	向每個(gè)匹配的元素內(nèi)部前置內(nèi)容
prependTo()	把所有匹配的元素前置到另一個(gè)指定的元素集合中。實(shí)際上是顛倒了preprend()的用法。如$(A).prepend(B)與$(B).prenpendTo(B)等價(jià)

具體實(shí)現(xiàn)如下：

 $("div").append("<p>這是append()方法添加的內(nèi)容</p>");//在div元素下第一個(gè)子節(jié)點(diǎn)位置插入段落
 $("div").prepend("<p>這是prepend()方法添加的內(nèi)容</p>");//在div元素下最后一個(gè)子節(jié)點(diǎn)位置插入段落

下面這兩種方法更符合人的一般思維，但效果是一樣的

 $("<p>這是appendTo方法添加的內(nèi)容</p>").appendTo("div");//把段落插到div元素的第一個(gè)子節(jié)點(diǎn)位置
 $("<p>這是prependTo方法添加的內(nèi)容</p>").prependTo("div");//把段落插到div元素的最后一個(gè)子節(jié)點(diǎn)位置

2、在節(jié)點(diǎn)外部插入:

方法	說明
after()	在每個(gè)匹配的元素之后插入內(nèi)容
before()	在每個(gè)匹配的元素之前插入內(nèi)容
insertAfter()	把所有匹配的元素插入到另一個(gè)指定的元素集合的后面
insertBefore()	把所有匹配的元素插入到另一個(gè)指定的元素集合的前面

具體實(shí)現(xiàn)如下：

$("div").after("<p>這是after()方法添加的內(nèi)容</p>");//在div元素后面插入段落
$("div").before("<p>這是before()方法添加的內(nèi)容</p>");//在div元素前面插入段落

$("div").after("<p>這是after()方法添加的內(nèi)容</p>");//在div元素后面插入段落
$("div").before("<p>這是before()方法添加的內(nèi)容</p>");//在div元素前面插入段落

3、appendTo(),prependTo(), insertBefore(),insertAfter() 方法具有破壞性操作特性，也就是如果選擇已經(jīng)存在內(nèi)容，并把它們插入到指定對象中時(shí)，則原位置的內(nèi)容將被刪除。下面實(shí)例中將原div元素中包含的段落文本選中并移到div元素后面。演示如下：
$("p").insertAfter("div");