JQuery创建DOM节点的方法

这篇文章主要介绍了JQuery创建DOM节点的方法,实例分析了jQuery创建元素结点、文本结点、属性结点的相关技巧,需要的朋友可以参考下

本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下：

用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。

HTML DOM结构如下：

简单易懂的PHP编程
简单易懂的JavaScript编程
简单易懂的JQuery编程

创建元素节点

例如要创建两个

元素节点，并且要把它们作为

1. 创建两个

新元素。
2. 将这两个新元素插入文档中。
第1个步骤可以使用jQuery的工厂函数$()来完成，格式如下：
$(html);
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个
元素，jQuery代码如下：
```
 var $li_1 = $("
"); // 创建第一个元素 var $li_2 = $("
"); // 创建第二个元素
```
然后将这两个新元素插入文档中，可以使用jQuery中的append()等方法。JQuery代码如下：
```
 var $parent = $(".nm_ul"); // 获取节点。的父节点 $parent.append($li_1); // 添加到节点中，使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2); 
```
动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。例如创建一个
元素，可以用$("
")或者$("
")，但不要使用$("
")或者大写的$("
")。
创建文本节点
已经创建了两个
元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。
JQuery代码如下：
```
 var $li_1 = $("新增节点：数据结构
"); // 创建第一个元素 var $li_2 = $("
新增节点：设计模式
"); // 创建第二个元素 var $parent = $(".nm_ul"); // 获取节点。的父节点 $parent.append($li_1); // 添加到节点中，使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2); 
```
如以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以了。
无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。例如$("
这是一个复杂的组合

创建属性节点

创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建。JQuery代码如下：

 var $li_1 = $("新增节点：数据结构
"); // 创建第一个元素 var $li_2 = $("
新增节点：设计模式
"); // 创建第二个元素 var $parent = $(".nm_ul"); // 获取节点。的父节点 $parent.append($li_1); // 添加到节点中，使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

通过浏览器查看源代码工具查看代码，可以看到最后两个