节点的创建

2017-01-08 09:06 出处:360java.com 作者:360java  阅读()
一、 创建节点: 节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素、属性、文本、文档和注释。但在实际开发中,要动态创建内容,主要操作的节点包括元素、

一、  创建节点:

节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素、属性、文本、文档和注释。但在实际开发中,要动态创建内容,主要操作的节点包括元素、属性和文本。

1、需求:创建一个h1 标签,把它作为div元素的子节点添加到DOM节点树中。

2、基本思路是:先创建一个h1元素对象,然后添加到文档中。

3、以下是两种实现方式:

1 // jQuery方式
2 
3 var $h1 = $("<h1 title='创建节点' class='head'>jQuery与JavaScript创建节点比较</h1>");
4 $("div").append($h1);
1 //JavaScript方式
2 var div = document.getElementById("div1");
3 var h1 = document.createElement("h1");//创建h1对象
4 
5 h1.setAttribute("title","创建节点");//为h1对象创建属性节点,并设置属性值
6 h1.setAttribute("class","head");//为h1对象成交价属性节点class,并设置属性值
7 var txt = document.createTextNode("jQuery与JavaScript创建节点比较");
8 h1.appendChild(txt);//将文本增加到元素节点中
9 div.appendChild(h1);//把创建的h1对象添加到div中

4、两种方式比较:

1)、代码输入:jQuery创建元素节点操作简单,仅两行代码即可快速实现。JavaScript实现比较麻烦,用户需要分别创建元素节点和文本节点,然后再一步步地把文本节点添加到元素节点中,最后才能够添加到DOM结构树中。

2)、从执行角度分析:在Safari浏览器中,JavaScript实现要比jQuery实现快80倍以上,而在执行速度最慢的IE浏览器,两者差别也在10倍以上

 

分享到:
本文标签: 节点, 创建

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) 360java 360java.com, All Rights Reserved.

苏ICP备16022210号