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插件 easyUI属性汇总
Jan 19 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
javascript代码实现简易计算器
Jan 25 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
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
php模拟post提交数据的方法
2015/02/12 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
Django如何重置migration的几种情景
2021/02/24 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
周鸿祎:教你写创业计划书
2013/12/30 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android