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

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

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

<p class="nm_p" title="歡迎訪問(wèn)腳本之家" >歡迎訪問(wèn)腳本之家</p>
<ul class="nm_ul">
    <li title='PHP編程'>簡(jiǎn)單易懂的PHP編程</li>
    <li title='JavaScript編程'>簡(jiǎn)單易懂的JavaScript編程</li>
    <li title='JQuery編程'>簡(jiǎn)單易懂的JQuery編程</li>
</ul>

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

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

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

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

$(html);

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

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

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

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

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

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

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

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

JQuery代碼如下：

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

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

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

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

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

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

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

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

最新評(píng)論