abstract：本文主要介紹jQuery與JavaScript節(jié)點(diǎn)的創(chuàng)建方法一、 創(chuàng)建節(jié)點(diǎn)：節(jié)點(diǎn)是DOM結(jié)構(gòu)的基礎(chǔ)，根據(jù)DOM規(guī)范，節(jié)點(diǎn)是一個很寬泛的概念，包含元素、屬性、文本、文檔和注釋。但在實(shí)際開發(fā)中，要動態(tài)創(chuàng)建內(nèi)容，主要操作的節(jié)點(diǎn)包括元素、屬性和文本。1、需求：創(chuàng)建一個h1 標(biāo)簽，把它作為div元素的子節(jié)點(diǎn)添加到DOM節(jié)點(diǎn)樹中。2、基本思路是：先創(chuàng)建一個h1元素對象，然后添加到文檔中。3、以下是兩種實(shí)現(xiàn)方式

本文主要介紹jQuery與JavaScript節(jié)點(diǎn)的創(chuàng)建方法

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

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

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

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

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

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

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

4、兩種方式比較：

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

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

更多關(guān)于jQuery與JavaScript節(jié)點(diǎn)創(chuàng)建方法的對比請關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！