JQuery創建DOM節點的方法_jquery-js教程-PHP中文網

JQuery創建DOM節點的方法_jquery

WBOY

發布： 2016-05-16 15:56:02

原創

1725 人瀏覽過

本文實例講述了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>

登入後複製

建立元素節點

例如要建立兩個

元素節點，並且要把它們當作

1. 建立兩個

新元素。
2. 將這兩個新元素插入文件中。

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

$(html);

$(html)方法會根據傳入的HTML標記字串，建立一個DOM對象，並將這個DOM物件包裝成一個jQuery物件後返回。

先建立兩個
元素，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格式。例如建立一個
元素，可以用$("
")或$("
")，但不要使用$("
")或大寫的$("
")。

建立文字節點

已經創建了兩個
元素節點並把它們插入文件中了。此時需要為已建立的元素節點新增文字內容。

JQuery程式碼如下：
```
var $li_1 = $("新增节点：数据结构
"); // 创建第一个元素
var $li_2 = $("
新增节点：设计模式
"); // 创建第二个元素
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程式碼多麼複雜，都要使用相同的方式來建立。例如$("
這是一個複雜的組合

建立屬性節點

建立屬性節點與建立文字節點類似，也是直接在建立元素節點時一起建立。 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);

登入後複製

透過瀏覽器查看原始碼工具檢視程式碼，可以看到最後兩個

元素多了名為「title」的屬性節點。由此可以判斷，所建立的元素的文字節點和屬性節點都已經加入到網頁中了。由此可見用jQuery來動態建立HTML元素是非常簡單、方便且靈活的。
希望本文所述對大家的jQuery程式設計有所幫助。