這篇文章主要介紹了JQuery創建DOM節點的方法,實例分析了jQuery創建元素結點、文本結點、屬性結點的相關技巧,需要的朋友可以參考下

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

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

HTML DOM結構如下：

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

創建元素節點

例如要創建兩個

• 元素節點，并且要把它們作為

   

  1. 創建兩個

   

  創建屬性節點

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

   

   

  1. var $li_1 = $("<li title='新增節點：數據結構'>新增節點：數據結構</li>"); // 創建第一個<li>元素 
  2. var $li_2 = $("<li title='新增節點：設計模式'>新增節點：設計模式</li>"); // 創建第二個<li>元素 
  3. var $parent = $(".nm_ul"); // 獲取<ul>節點。<li>的父節點 
  4. $parent.append($li_1); // 添加到<ul>節點中，使之能在網頁中顯示 
  5. $parent.append($li_2); // 可以采取鏈式寫法：$parent.append($li_1).append($li_2); 

  通過瀏覽器查看源代碼工具查看代碼，可以看到最后兩個

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

     

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

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

    $(html);

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

    首先創建兩個

  • 元素，jQuery代碼如下：

     

     

    1. var $li_1 = $("<li></li>"); // 創建第一個<li>元素 
    2. var $li_2 = $("<li></li>"); // 創建第二個<li>元素 

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

     

     

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

    動態創建的新元素節點不會被自動添加到文檔中，而是需要使用其他方法將其插入文檔中。當創建單個元素時，要注意閉合標簽和使用標準的XHTML格式。例如創建一個

    元素，可以用$("

    ")或者$("

     

    ")，但不要使用$("

    ")或者大寫的$("

    ")。

    創建文本節點

    已經創建了兩個

  • 元素節點并把它們插入文檔中了。此時需要為創建的元素節點添加文本內容。

     

    JQuery代碼如下：

     

     

    1. var $li_1 = $("<li>新增節點：數據結構</li>"); // 創建第一個<li>元素 
    2. var $li_2 = $("<li>新增節點：設計模式</li>"); // 創建第二個<li>元素 
    3. var $parent = $(".nm_ul"); // 獲取<ul>節點。<li>的父節點 
    4. $parent.append($li_1); // 添加到<ul>節點中，使之能在網頁中顯示 
    5. $parent.append($li_2); // 可以采取鏈式寫法：$parent.append($li_1).append($li_2); 

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

    無論$(html)中的HTML代碼多么復雜，都要使用相同的方式來創建。例如$("

  • 這是一個復雜的組合
  ");
  • 元素多了名為“title”的屬性節點。由此可以判斷，創建的元素的文本節點和屬性節點都已經添加到網頁中了。由此可見用jQuery來動態創建HTML元素是非常簡單、方便和靈活的。

     

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