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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
ReactNative中使用Redux架构总结
Dec 15 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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 开源AJAX框架14种
2009/08/24 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python中变量交换的例子
2014/08/25 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
简单了解python变量的作用域
2019/07/30 Python
Python实现元素等待代码实例
2019/11/11 Python
Python运行DLL文件的方法
2020/01/17 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
一道Delphi面试题
2016/10/28 面试题
学校大课间活动方案
2014/01/30 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
数据库连接池
2021/04/06 MySQL
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL