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 event使用方法详解
Apr 28 Javascript
js类中的公有变量和私有变量
Jul 24 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
深入了解JS之作用域和闭包
Jun 16 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python中文编码知识点
2019/02/18 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Python pymsql模块的使用
2020/09/07 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
抽奖活动主持词
2014/03/31 职场文书
小学学校评估方案
2014/06/08 职场文书
2015中学学校工作总结
2015/07/20 职场文书
自信主题班会
2015/08/14 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
解析Redis Cluster原理
2021/06/21 Redis
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python