一、  创建节点:

节点是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 方法的更多相关文章

  1. 节点插入--对比jQuery和JavaScript方法(一)

    二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 ap ...

  2. 对比JQuery与JavaScript

    JavaScript 是一种脚本语言,主要用在浏览器中,实现对网页的文档对象的操作和一些用户交互动作的处理.而 jQuery 则是 JavaScript 的一个代码库(或习惯性叫类库),它将一些在 J ...

  3. jquery调用javascript方法

    本来想找个“优雅”一点的方法,类似C#在调用C++方法时候的Invoke之类的.没找到,后来想想,其实也没必要,直接写就好了,算最优雅了吧.只是少了VS的Intelligence,有点不习惯罢了. 事 ...

  4. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  5. JavaScript和jQuery中的方法整理

    一.属性操作 // JavaScript: Dom.hasAttribute('attrName'); //是否有指定属性 Dom.hasAttributes(); //是否有属性 Dom.getAt ...

  6. Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法

    $() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selecto ...

  7. JavaScript之节点的创建、替换、删除、插入

    1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...

  8. jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)

    jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $("ul").append("<li cla ...

  9. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

随机推荐

  1. Docker系列(一)安装

    操作系统版本:Centos7 Docker版本:1.8 设置安装源 1  cat > /etc/yum.repos.d/docker.repo << -EOF 2  [dockerr ...

  2. 集群搭建:主机宽带拨号上网,虚拟机使用桥接模式,该如何ping通外网

    首先介绍一下看这篇文章需要的基础.需要了解虚拟机的 虚拟机的三种网络模式,有Linux基础知识,这些都是前提.首先介绍一下我的环境:主机:win7虚拟机:VMware Workstation 10虚拟 ...

  3. A list of base boxes for Vagrant - Vagrantbox.es

    Create image server with nginx + lua (Openresty) + graphicsmagick (Part I) | Ian's PhotograPhy Blog ...

  4. 群赛 ZOJ3741(dp) ZOJ3911(线段树)

    zoj3741 简单dp.wa了两个小时,中间改了好多细节.后来还是不对,参考了别人的代码,发现一个致命问题,初始化的时候,不是每种状态都能直接达到的.初始化成-1. (题目有个小坑,0<=L& ...

  5. java.lang.UnsupportedClassVersionError: Unsupported major.minor version 52.0的错误

    1.首先检查是不是jdk版本过低,如果过低的话就把jdk重新安装一下 2.在编译器的版本中设置一下,compiler中设置成与jdk版本相同

  6. iOS中事件的传递和响应者链条

    在iOS 开发中,常见的事件有三种类型,分别是: (1)触摸事件:平常手指在屏幕上滑动,产生的事件都是触摸事件 (2)加速计事件:微信的摇一摇就是典型的加速计事件 (3)远程控制事件:耳机控制歌曲上一 ...

  7. iOS开发中打开本地应用、打开appStore应用、给app评分功能实现

    app开发中,通常会有邀请用户给app打分的功能.而在iOS中,正式应用都是通过appStore 下载的,因此给app 打分也只能在 appStore中.因此,需要从应用跳转到appStore.方法是 ...

  8. 在C#中我们能调用一个类的私有方法吗

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在C#中我们能调用一个类的私有方法吗.

  9. ubuntu安装软件

    sudo apt-get install gnome-tweak-tool sudo apt-get install gksu 软件数据库损坏 无法安装或删除任何软件.请先使用新立得软件包管理器或在终 ...

  10. 机器人api(图灵机器人)

    图灵机器人,是基于自然语言解析的智能机器人,已经免费开放了机器人api接口,有需求的同学能够去试试. 图灵机器人官网:http://www.tuling123.com 图灵机器人体验:http://w ...