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

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

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

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

節(jié)點是DOM結構的基礎，根據(jù)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插入元素的方法對比，大家可以關注下。。

您可能感興趣的文章:

uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼
這篇文章主要介紹了uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
JS?const關鍵字生成常量的三個特點介紹
這篇文章主要介紹了JS?const關鍵字生成常量有哪些特點，下面通過代碼演示const關鍵字聲明的常量的塊級作用域效果，需要的朋友可以參考下
2023-05-05
JavaScript內置對象之Array的使用小結
這篇文章主要介紹了JavaScript內置對象之Array的使用小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
JavaScript實現(xiàn)雙向鏈表過程解析
這篇文章主要介紹了利用JavaScript實現(xiàn)雙向鏈表以及它的封裝和常用操作，文中的示例代碼講解詳細，對日常的學習和工作都有一定的價值，快來和小編一起學習吧
2021-12-12
JavaScript 引用類型實例詳解【數(shù)組、對象、嚴格模式等】
這篇文章主要介紹了JavaScript 引用類型,結合實例形式詳細分析了JavaScript 數(shù)組、對象、嚴格模式引用類型相關概念、原理及操作注意事項,需要的朋友可以參考下
2020-05-05
利用es6 new.target來對模擬抽象類的方法
這篇文章主要介紹了利用es6 new.target來對模擬抽象類的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
js實現(xiàn)微博發(fā)布小功能
本篇文章主要介紹了javascript實現(xiàn)微博發(fā)布小功能的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
js實現(xiàn)瀏覽器的各種菜單命令比如打印、查看源文件等等
瀏覽器的各種菜單命令比如打印、查看源文件、加入收藏等等，這些在js中時完全可以實現(xiàn)的，本文搜集整理了一些，感興趣的朋友可以參考下
2013-10-10
javascript 從if else 到 switch case 再到抽象
大家覺得在接手遺留代碼時，見到什么東東是最讓人感到不耐煩的？復雜無比的 UML ？我覺得不是。
2010-07-07
前端axios下載excel文件(二進制)的處理方法
新接了項目，遇到這樣的需求，通過后端接口下載excel文件，后端沒有文件地址，返回二進制流文件。接下來通過實例代碼給大家分享前端axios下載excel文件(二進制)的處理方法，一起看看吧
2018-07-07