jQuery和JavaScript節點插入元素的方法對比

二、插入元素：

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

   

(一)、jQuery方法

1、在節點內部插入:

兩種方法更符合人的一般思維，但效果是相同的

$("div").append("<p>这是append()方法添加的内容</p>");//在div元素下第一个子节点位置插入段落
$("div").prepend("<p>这是prepend()方法添加的内容</p>");//在div元素下最后一个子节点位置插入段落

   

2、在節點外插入:

3、appendTo(),prependTo(), insertBefore(),insertAfter() 方法具有破壞性操作特性，也就是如果選擇已經存在內容，並將它們插入到指定物件中時，則原位置的內容將被刪除。下面實例中將原div元素中包含的段落文字選取並移到div元素後面。示範如下：

 $("p").insertAfter("div");

 (二)、JavaScript方法

1、在節點內部插入：appendChild()—--對應於jQuery的append( ), insertBefore()---對應於jQuery中的prepend()

　　　　　具體效果請看上面jQuery方法。 。 。