原生JS和jQuery操作DOM比較總結

原生JS和jQuery操作DOM的一些對比總結，文中總結了很多的對比，相信對大家的學習或工作能帶來一定的幫助，需要的朋友可以參考借鑒，下面來一起看看吧。

一、建立元素節點

1.1 原生JS建立元素節點

document.createElement("p");

1.2 jQuery。

2.1原生JS建立文字節點

$(&#39;<p></p>&#39;);`

通常會建立文字節點和建立元素節點搭配使用，例如：

document.createTextNode("Text Content");

2.2 jQuery建立並加入文字節點：

3.1 原生JS複製節點:

var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);

tru​​e與false的差別：

var $p = $(&#39;<p>Hello World.</p>&#39;);

tru​​e與false的差別：

.只複製'

' ，不複製文字Hello World.

3.2 jQuery複製節點

var newEl = pEl.cloneNode(true);

1. 插入節點

2. 
   

   4.1 原生JS向子節點列表的末尾添加新的子節點

$newEl = $('#pEl').clone(true);

原生JS在節點的已有子節點之前插入一個新的子節點：

4.2 在jQuery中，插入節點的方法比原生JS多的多

在匹配元素子節點列表結尾添加內容
 

El.appendChild(newNode);

把匹配元素添加到目標元素子列表結尾到在符合元素子節點清單開頭加入內容

 

El.insertBefore(newNode, targetNode);

把符合元素加入目標元素子節點清單開頭

$(&#39;#El&#39;).append(&#39;<p>Hello World.</p>&#39;);

在配對元素之前加入目標內容

$(&#39;<p>Hello World.</p>&#39;).appendTo(&#39;#El&#39;);

$(&#39;#El&#39;).prepend(&#39;<p>Hello World.</p>&#39;);

在匹配元素之後加入目標內容

$(&#39;<p>Hello World.</p>&#39;).prependTo(&#39;#El&#39;);

把匹配元素加入目標元素之後

$(&#39;#El&#39;).before(&#39;<p>Hello World.</p>&#39;);

五、刪除節點

刪除節點

$(&#39;<p>Hello World.</p>&#39;).insertBefore(&#39;#El&#39;);

六、替換節點

6.1 原生JS替換節點

$(&#39;#El&#39;).after(&#39;<p>Hello World.</p>&#39;);

$(&#39;<p>Hello World.</p>&#39;).insertAfter(&#39;#El&#39;);

七、設定屬性/取得屬性

7.1 原生JS設定屬性/取得屬性

El.parentNode.removeChild(El);

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或工作能帶來一定的幫助，如果有疑問大家可以留言交流。