首頁  >  文章  >  php教程  >  jQuery與JavaScript節點建立方法的對比

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

高洛峰
高洛峰原創
2016-12-06 14:45:551101瀏覽

一、 建立節點:

節點是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倍以上

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn