原生JS和jQuery操作DOM比較總結-js教程-PHP中文網

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

迷茫

發布： 2017-01-24 15:59:40

原創

1557 人瀏覽過

原生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);

登入後複製

true與false的差別：

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

登入後複製

true與false的差別：

.只複製'

' ，不複製文字Hello World.

3.2 jQuery複製節點

var newEl = pEl.cloneNode(true);

登入後複製

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

$newEl = $(&#39;#pEl&#39;).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);

登入後複製

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