JQuery創建DOM節點的方法_jquery

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

建立元素節點

例如要建立兩個

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

元素節點的子節點加入DOM節點樹上。完成這個任務需要兩個步驟。

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程式設計有所幫助。