jQuery与JavaScript节点创建方法的对比


Posted in Javascript onNovember 18, 2016

一、 创建节点:

节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素、属性、文本、文档和注释。但在实际开发中,要动态创建内容,主要操作的节点包括元素、属性和文本。

1、需求:创建一个h1 标签,把它作为div元素的子节点添加到DOM节点树中。

2、基本思路是:先创建一个h1元素对象,然后添加到文档中。

3、以下是两种实现方式:

// jQuery方式
var $h1 = $("<h1 title='创建节点' class='head'>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中
 

4、两种方式比较:

1)、代码输入:jQuery创建元素节点操作简单,仅两行代码即可快速实现。JavaScript实现比较麻烦,用户需要分别创建元素节点和文本节点,然后再一步步地把文本节点添加到元素节点中,最后才能够添加到DOM结构树中。

2)、从执行角度分析:在Safari浏览器中,JavaScript实现要比jQuery实现快80倍以上,而在执行速度最慢的IE浏览器,两者差别也在10倍以上

以上所述是本文的全部内容,有问题的可以和小编联系,下篇文章介绍jQuery与JavaScript插入元素的方法对比,大家可以关注下。。

Javascript 相关文章推荐
js读取本地excel文档数据的代码
Nov 11 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
javascript实现回到顶部特效
May 06 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jstree的简单实例
Dec 01 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 #Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 #Javascript
form+iframe解决跨域上传文件的方法
Nov 18 #Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 #Javascript
微信小程序开发实战教程之手势解锁
Nov 18 #Javascript
JavaScript之WebSocket技术详解
Nov 18 #Javascript
仿iframe效果Aajx文件上传实例
Nov 18 #Javascript
You might like
php 文件上传系统手记
2009/10/26 PHP
php类中private属性继承问题分析
2012/11/01 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
jQuery冲突问题解决方法
2021/01/19 jQuery
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python 多核并行计算的示例代码
2017/11/07 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
基于Python的OCR实现示例
2020/04/03 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
python实现简单遗传算法
2020/09/18 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
企划专员岗位职责
2013/12/09 职场文书
道路建设实施方案
2014/03/18 职场文书
综合实践活动总结
2014/05/05 职场文书
小学社会实践活动总结
2014/07/03 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
学籍证明模板
2015/06/18 职场文书
安全伴我行主题班会
2015/08/13 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
Linux中文件的基本属性介绍
2022/06/01 Servers
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技