jQuery與JavaScript節點建立方法的對比

一、 建立節點：

節點是DOM結構的基礎，根據DOM規範，節點是一個很廣泛的概念，包含元素、屬性、文字、文件和註解。但在實際開發中，要動態創建內容，主要操作的節點包括元素、屬性和文字。

1、需求：建立一個h1 標籤，把它當作div元素的子節點加入DOM節點樹。

2、基本想法是：先建立一個h1元素對象，然後再加入文件中。

3、以下是兩種實作方式：

// jQuery方式
var $h1 = $("<h1 title=&#39;创建节点&#39; class=&#39;head&#39;>jQuery与JavaScript创建节点比较</h1>");
$("div").append($h1);

    

//JavaScript方式
var div = document.getElementById("div1");
var h1 = document.createElement("h1");//创建h1对象
h1.setAttribute("title","创建节点");//为h1对象创建属性节点，并设置属性值
h1.setAttribute("class","head");//为h1对象成交价属性节点class，并设置属性值
var txt = document.createTextNode("jQuery与JavaScript创建节点比较");
h1.appendChild(txt);//将文本增加到元素节点中
div.appendChild(h1);//把创建的h1对象添加到div中

   

 

rr可快速實現。 JavaScript實作比較麻煩，使用者需要分別建立元素節點和文字節點，然後再一步一步把文字節點加入元素節點中，最後才能夠加入DOM結構樹。

2)、從執行角度分析：在Safari瀏覽器中，JavaScript實現要比jQuery實現快80倍以上，而在執行速度最慢的IE瀏覽器，兩者差異也在10倍以上