当前位置: 首页 > 编程笔记 >

jQuery与JavaScript节点创建方法的对比

濮书
2023-03-14
本文向大家介绍jQuery与JavaScript节点创建方法的对比,包括了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创建DOM节点的方法,包括了JQuery创建DOM节点的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建

  • 本文向大家介绍jQuery获取单击节点对象的方法,包括了jQuery获取单击节点对象的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery获取单击节点对象的方法。分享给大家供大家参考,具体如下: event.target属性: 解释: 其中event.target 即为触发单击事件的对象 (有可能是容器内部的某个控件) PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在

  • 本文向大家介绍javascript创建对象的3种方法,包括了javascript创建对象的3种方法的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了js创建对象的多种方法,分享个方法的优劣,具体内容如下 第一种创建对象的方式: 创建JSON对象 推荐使用的场合: 作为函数的参数,临时只用一次的场景。比如设置函数原型对象。 第二种创建对象的方式: 创建一个Object对象 以上两种创建对象方

  • “email”节点以前是从另一个“people.csv”文件创建的,并且“email”节点存在唯一性约束。在上面的行中,我希望通过关系将“created_by”、“delivered_to”和“delivered_by”节点与之前创建的“email”节点合并。当我运行代码时,它给出了错误,并且没有从CSV中创建any节点。如何组织密码查询以防止此错误?谢了。

  • 本文向大家介绍JQuery查找DOM节点的方法,包括了JQuery查找DOM节点的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作,首先需要构建一个网页。因为每一张网页都能用D

  • 本文向大家介绍Jquery节点遍历next与nextAll方法使用示例,包括了Jquery节点遍历next与nextAll方法使用示例的使用技巧和注意事项,需要的朋友参考一下 Jqeruy节点遍历