一、 创建节点：
节点是DOM结构的基础，根据DOM规范，节点是一个很宽泛的概念，包含元素、属性、文本、文档和注释。但在实际开发中，要动态创建内容，主要操作的节点包括元素、属性和文本。
1、需求：创建一个h1 标签，把它作为div元素的子节点添加到DOM节点树中。
2、基本思路是：先创建一个h1元素对象，然后添加到文档中。
3、以下是两种实现方式：
立即学习“Java免费学习笔记（深入）”；
// 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倍以上
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
4152
