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设置按钮的disabled属性的实现代码
Nov 28 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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
destoon找回管理员密码的方法
2014/06/21 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Python排序函数的使用方法详解
2020/12/11 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
出纳试用期自我鉴定范文
2014/09/16 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android