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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Javascript的比较汇总
Jul 25 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
vue实现井字棋游戏
Sep 29 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php数组使用规则分析
2015/02/27 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
vue组件生命周期详解
2017/11/07 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Python多线程实例教程
2014/09/06 Python
详解Django中的权限和组以及消息
2015/07/23 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python如何使用input函数获取输入
2020/08/06 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
职称评定自我鉴定
2014/03/18 职场文书
应届大专生自荐书
2014/06/16 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
导游词之日本富士山
2020/01/06 职场文书