jQuery與JavaScript節(jié)點創(chuàng)建方法的對比

更新時間：2016年11月18日 10:30:06 作者：胖不了的瘦子

本文主要介紹jQuery與JavaScript節(jié)點的創(chuàng)建方法，以及他們的具體代碼實現(xiàn)方法，大家可以對比下他們之間的不同，希望對大家編寫代碼有所幫助

一、創(chuàng)建節(jié)點：

節(jié)點是DOM結構的基礎，根據DOM規(guī)范，節(jié)點是一個很寬泛的概念，包含元素、屬性、文本、文檔和注釋。但在實際開發(fā)中，要動態(tài)創(chuàng)建內容，主要操作的節(jié)點包括元素、屬性和文本。

1、需求：創(chuàng)建一個h1 標簽，把它作為div元素的子節(jié)點添加到DOM節(jié)點樹中。

2、基本思路是：先創(chuàng)建一個h1元素對象，然后添加到文檔中。

3、以下是兩種實現(xiàn)方式：

// jQuery方式
var $h1 = $("<h1 title='創(chuàng)建節(jié)點' class='head'>jQuery與JavaScript創(chuàng)建節(jié)點比較</h1>");
$("div").append($h1);

//JavaScript方式
var div = document.getElementById("div1");
var h1 = document.createElement("h1");//創(chuàng)建h1對象
h1.setAttribute("title","創(chuàng)建節(jié)點");//為h1對象創(chuàng)建屬性節(jié)點，并設置屬性值
h1.setAttribute("class","head");//為h1對象成交價屬性節(jié)點class，并設置屬性值
var txt = document.createTextNode("jQuery與JavaScript創(chuàng)建節(jié)點比較");
h1.appendChild(txt);//將文本增加到元素節(jié)點中
div.appendChild(h1);//把創(chuàng)建的h1對象添加到div中

4、兩種方式比較：

1)、代碼輸入：jQuery創(chuàng)建元素節(jié)點操作簡單，僅兩行代碼即可快速實現(xiàn)。JavaScript實現(xiàn)比較麻煩，用戶需要分別創(chuàng)建元素節(jié)點和文本節(jié)點，然后再一步步地把文本節(jié)點添加到元素節(jié)點中，最后才能夠添加到DOM結構樹中。

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

以上所述是本文的全部內容，有問題的可以和小編聯(lián)系，下篇文章介紹jQuery與JavaScript插入元素的方法對比，大家可以關注下。。

您可能感興趣的文章: