节点的创建--对比jQuery与JavaScript 方法
一、 创建节点:
节点是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 方法的更多相关文章
- 节点插入--对比jQuery和JavaScript方法(一)
二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 ap ...
- 对比JQuery与JavaScript
JavaScript 是一种脚本语言,主要用在浏览器中,实现对网页的文档对象的操作和一些用户交互动作的处理.而 jQuery 则是 JavaScript 的一个代码库(或习惯性叫类库),它将一些在 J ...
- jquery调用javascript方法
本来想找个“优雅”一点的方法,类似C#在调用C++方法时候的Invoke之类的.没找到,后来想想,其实也没必要,直接写就好了,算最优雅了吧.只是少了VS的Intelligence,有点不习惯罢了. 事 ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- JavaScript和jQuery中的方法整理
一.属性操作 // JavaScript: Dom.hasAttribute('attrName'); //是否有指定属性 Dom.hasAttributes(); //是否有属性 Dom.getAt ...
- Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selecto ...
- JavaScript之节点的创建、替换、删除、插入
1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...
- jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $("ul").append("<li cla ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
随机推荐
- Docker系列(一)安装
操作系统版本:Centos7 Docker版本:1.8 设置安装源 1 cat > /etc/yum.repos.d/docker.repo << -EOF 2 [dockerr ...
- 集群搭建:主机宽带拨号上网,虚拟机使用桥接模式,该如何ping通外网
首先介绍一下看这篇文章需要的基础.需要了解虚拟机的 虚拟机的三种网络模式,有Linux基础知识,这些都是前提.首先介绍一下我的环境:主机:win7虚拟机:VMware Workstation 10虚拟 ...
- A list of base boxes for Vagrant - Vagrantbox.es
Create image server with nginx + lua (Openresty) + graphicsmagick (Part I) | Ian's PhotograPhy Blog ...
- 群赛 ZOJ3741(dp) ZOJ3911(线段树)
zoj3741 简单dp.wa了两个小时,中间改了好多细节.后来还是不对,参考了别人的代码,发现一个致命问题,初始化的时候,不是每种状态都能直接达到的.初始化成-1. (题目有个小坑,0<=L& ...
- java.lang.UnsupportedClassVersionError: Unsupported major.minor version 52.0的错误
1.首先检查是不是jdk版本过低,如果过低的话就把jdk重新安装一下 2.在编译器的版本中设置一下,compiler中设置成与jdk版本相同
- iOS中事件的传递和响应者链条
在iOS 开发中,常见的事件有三种类型,分别是: (1)触摸事件:平常手指在屏幕上滑动,产生的事件都是触摸事件 (2)加速计事件:微信的摇一摇就是典型的加速计事件 (3)远程控制事件:耳机控制歌曲上一 ...
- iOS开发中打开本地应用、打开appStore应用、给app评分功能实现
app开发中,通常会有邀请用户给app打分的功能.而在iOS中,正式应用都是通过appStore 下载的,因此给app 打分也只能在 appStore中.因此,需要从应用跳转到appStore.方法是 ...
- 在C#中我们能调用一个类的私有方法吗
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在C#中我们能调用一个类的私有方法吗.
- ubuntu安装软件
sudo apt-get install gnome-tweak-tool sudo apt-get install gksu 软件数据库损坏 无法安装或删除任何软件.请先使用新立得软件包管理器或在终 ...
- 机器人api(图灵机器人)
图灵机器人,是基于自然语言解析的智能机器人,已经免费开放了机器人api接口,有需求的同学能够去试试. 图灵机器人官网:http://www.tuling123.com 图灵机器人体验:http://w ...