JQuery插入DOM節點的方法，jquerydom節點

JQuery插入DOM節點的方法，jquerydom節點

本文執行個體講述了JQuery插入DOM節點的方法。分享給大家供大家參考。具體分析如下：

動態建立HTML元素並沒有實際用處，還需要將新建立的元素插入文檔中。將新建立的節點插入文檔最簡單的辦法是，讓它成為這個文檔的某個節點的子節點。前面使用了一個插入節點的方法append()，它會在元素內部追加新建立的內容。

將新建立的節點插入某個文檔的方法並非只有一種，在JQuery中還提供了其他兒種插入節點的方法，如下表所示。讀者可以根據實際需求靈活地做出多種選擇。

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>

append()

向每個匹配的元素內部追加內容：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuery代碼：
複製代碼 代碼如下:$("p").append("<b>你好</b>");
結果：
複製代碼 代碼如下:<p>我想說：<b>你好</b></p>

appendTo()

將所有匹配的元素追加到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是將B追加到A中，而是將A追加到B中：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuer代碼：
複製代碼 代碼如下:$("<b>你好</b>").appendTo("p");
結果：
複製代碼 代碼如下:<p>我想說：<b>你好</b></p>

prepend()

向每個匹配的元素內部前置內容：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuer代碼：
複製代碼 代碼如下:$("p").prepend<"<b>你好</b>");
結果：
複製代碼 代碼如下:<p><b>你好</b>我想說：</p>

prependTo()

將所有匹配的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuer代碼：
複製代碼 代碼如下:$("<b>你好</b>").prependTo("p");
結果：
複製代碼 代碼如下:<p><b>你好</b>我想說：</p>

after()

在每個匹配的元索之後插入內容：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuer代碼：
複製代碼 代碼如下:$("p").after("<b>你好</b>");
結果：
複製代碼 代碼如下:<p>我想說：</p><b>你好</b>

insertAfler()

將所有匹配的元素插入到指定元素的後面。實際上，使用該方法是顛倒了常規的$(A).after(B)的操作，即不是將B插入到A後面，而是將A插入到B後面：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuer代碼：
複製代碼 代碼如下:$("<b>你好</b>").insertAfter("p");
結果：
複製代碼 代碼如下:<p>我想說：</p><b>你好</b>

before()

在每個匹配的元素之前插入內容：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuer代碼：
複製代碼 代碼如下:$("p").before("<b>你好</b>");
結果：
複製代碼 代碼如下:<b>你好</b><p>我想說：</p>

insertBefore()

將所有匹配的元素捅入到指定的元素的前面。實際上，使用該方法是顛倒了常規的$(A).before(B)的操作，即不是將B插入到A前面，而是將A插入到B前面：

HTML代碼：
複製代碼 代碼如下:<p>我想說：</p>
jQuer代碼：
複製代碼 代碼如下:$("<b>你好</b>").insertBefore("p");
結果：
複製代碼 代碼如下:<b>你好</b><p>我想說：</p>

這些插入節點的方法不僅能將新建立的DOM元素插入到文檔中，也能對原有的DOM元素進行移動。例如利用它們建立新元素並對其進行插入操作：

$(function(){  var $li_1 = $("<li title='新增節點：資料結構'>新增節點：資料結構</li>"); // 建立第一個<li>元素  var $li_2 = $("<li title='新增節點：設計模式'>新增節點：設計模式</li>"); // 建立第二個<li>元素  var $li_3 = $("<li title='新增節點：電腦演算法'>新增節點：電腦演算法</li>"); // 建立第三個<li>元素  var $parent = $(".nm_ul"); // 擷取<ul>節點。<li>的父節點  var $two_li = $(".nm_ul li:eq(1)"); // 擷取<ul>節點中第二個<li>元素節點  $("#btn_1").click(function(){    $parent.append($li_1); // 添加到<ul>節點中，使之能在網頁中顯示  });  $("#btn_2").click(function(){    // 可以採取鏈式寫法：$parent.append($li_1).append($li_2);    $parent.append($li_2);     });  $("#btn_3").click(function(){    // insertAfter方法將建立的第三個<li>元素元素插入到擷取的<li>之後    $li_3.insertAfter($two_li);   });});

也利用它們對原有的DOM元素進行移動：

$(function(){  var $one_li = $("ul li:eq(1)"); // 擷取<ul>節點中第二個<li>元素節點  var $two_li = $("ul li:eq(2)"); // 擷取<ul>節點中第三個<li>元素節點  $two_li.insertBefore($one_li); //移動節點});

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