您好,欢迎访问一九零五行业门户网

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倍以上
其它类似信息

推荐信息