本文實例講述了JQuery創建DOM節點的方法。分享給大家供大家參考。具體分析如下：

用JQuery選擇器能夠快捷而輕松地查找到文檔中的某個特定的元素節點，然后可以用attr()方法來獲取元素的各種屬性的值。但真正的DOM操作并非這么簡單。在DOM操作中，常常需要動態創建HTML內容，使文檔在瀏覽器里的呈現效果發生變化，并且達到各種各樣的人機交互的目的。

HTML DOM結構如下：

<p class="nm_p" title="歡迎訪問武林網" >歡迎訪問武林網</p><ul class="nm_ul">    <li title='PHP編程'>簡單易懂的PHP編程</li>    <li title='JavaScript編程'>簡單易懂的JavaScript編程</li>    <li title='JQuery編程'>簡單易懂的JQuery編程</li></ul>

創建元素節點

例如要創建兩個<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 = $(".nm_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 = $(".nm_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 = $(".nm_ul"); // 獲取<ul>節點。<li>的父節點$parent.append($li_1); // 添加到<ul>節點中，使之能在網頁中顯示$parent.append($li_2); // 可以采取鏈式寫法：$parent.append($li_1).append($li_2);

通過瀏覽器查看源代碼工具查看代碼，可以看到最后兩個<li>元素多了名為“title”的屬性節點。由此可以判斷，創建的元素的文本節點和屬性節點都已經添加到網頁中了。由此可見用jQuery來動態創建HTML元素是非常簡單、方便和靈活的。

希望本文所述對大家的jQuery程序設計有所幫助。