快捷導(dǎo)航

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

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

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

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

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

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

2、基本思路是：先創(chuàng)建一個(gè)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à)屬性節(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倍以上

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

您可能感興趣的文章: