jQuery创建节点

注：摘自《锋利的jQuery(第二版)》

创建元素节点

例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。

1. 创建两个<li>新元素。
2. 将这两个新元素插入文档中。

第1个步骤可以使用jQuery的工厂函数$()来完成，格式如下：

$(html);

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个<li>元素，jQuery代码如下：

var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素

然后将这两个新元素插入文档中，可以使用jQuery中的append()等方法。JQuery代码如下：

var $parent = $("ul"); // 获取<ul>节点。<li>的父节点

$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。例如创建一个<p>元素，可以用$("<p/>")或者$("<p></p>")，但不要使用$("<p>")或者大写的$("<P/>")。

创建文本节点

已经创建了两个<li>元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。

JQuery代码如下：

var $li_1 = $("<li>香蕉</li>"); // 创建第一个<li>元素
var $li_2 = $("<li>雪梨</li>"); // 创建第二个<li>元素

var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

如以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以了。

无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。例如$("<li><em>这是</em><b>一个</b><a href="#">复杂的组合</a></li>");

创建属性节点

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

var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素

var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);