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

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

HTML DOM結(jié)構(gòu)如下：

<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>

創(chuàng)建元素節(jié)點

例如要創(chuàng)建兩個<li>元素節(jié)點，并且要把它們作為<ul>元素節(jié)點的子節(jié)點添加到DOM節(jié)點樹上。完成這個任務(wù)需要兩個步驟。

1. 創(chuàng)建兩個<li>新元素。
2. 將這兩個新元素插入文檔中。

第1個步驟可以使用jQuery的工廠函數(shù)$()來完成，格式如下：

$(html);

$(html)方法會根據(jù)傳入的HTML標(biāo)記字符串，創(chuàng)建一個DOM對象，并將這個DOM對象包裝成一個jQuery對象后返回。

首先創(chuàng)建兩個<li>元素，jQuery代碼如下：

var $li_1 = $("<li></li>"); // 創(chuàng)建第一個<li>元素
var $li_2 = $("<li></li>"); // 創(chuàng)建第二個<li>元素

然后將這兩個新元素插入文檔中，可以使用jQuery中的append()等方法。JQuery代碼如下：

var $parent = $(".nm_ul"); // 獲取<ul>節(jié)點。<li>的父節(jié)點
$parent.append($li_1); // 添加到<ul>節(jié)點中，使之能在網(wǎng)頁中顯示
$parent.append($li_2); // 可以采取鏈式寫法：$parent.append($li_1).append($li_2);

動態(tài)創(chuàng)建的新元素節(jié)點不會被自動添加到文檔中，而是需要使用其他方法將其插入文檔中。當(dāng)創(chuàng)建單個元素時，要注意閉合標(biāo)簽和使用標(biāo)準的XHTML格式。例如創(chuàng)建一個<p>元素，可以用$("<p/>")或者$("<p></p>")，但不要使用$("<p>")或者大寫的$("<P/>")。

創(chuàng)建文本節(jié)點

已經(jīng)創(chuàng)建了兩個<li>元素節(jié)點并把它們插入文檔中了。此時需要為創(chuàng)建的元素節(jié)點添加文本內(nèi)容。

JQuery代碼如下：

var $li_1 = $("<li>新增節(jié)點：數(shù)據(jù)結(jié)構(gòu)</li>"); // 創(chuàng)建第一個<li>元素
var $li_2 = $("<li>新增節(jié)點：設(shè)計模式</li>"); // 創(chuàng)建第二個<li>元素
var $parent = $(".nm_ul"); // 獲取<ul>節(jié)點。<li>的父節(jié)點
$parent.append($li_1); // 添加到<ul>節(jié)點中，使之能在網(wǎng)頁中顯示
$parent.append($li_2); // 可以采取鏈式寫法：$parent.append($li_1).append($li_2);

如以上代碼所示，創(chuàng)建文本節(jié)點就是在創(chuàng)建元素節(jié)點時直接把文本內(nèi)容寫出來，然后使用append()等方法將它們添加到文檔中就可以了。

無論$(html)中的HTML代碼多么復(fù)雜，都要使用相同的方式來創(chuàng)建。例如$("<li><em>這是</em><b>一個</b><a href="#">復(fù)雜的組合</a></li>");

創(chuàng)建屬性節(jié)點

創(chuàng)建屬性節(jié)點與創(chuàng)建文本節(jié)點類似，也是直接在創(chuàng)建元素節(jié)點時一起創(chuàng)建。JQuery代碼如下：

var $li_1 = $("<li title='新增節(jié)點：數(shù)據(jù)結(jié)構(gòu)'>新增節(jié)點：數(shù)據(jù)結(jié)構(gòu)</li>"); // 創(chuàng)建第一個<li>元素
var $li_2 = $("<li title='新增節(jié)點：設(shè)計模式'>新增節(jié)點：設(shè)計模式</li>"); // 創(chuàng)建第二個<li>元素
var $parent = $(".nm_ul"); // 獲取<ul>節(jié)點。<li>的父節(jié)點
$parent.append($li_1); // 添加到<ul>節(jié)點中，使之能在網(wǎng)頁中顯示
$parent.append($li_2); // 可以采取鏈式寫法：$parent.append($li_1).append($li_2);

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

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

最新評論