JQuery插入DOM節點的方法_jquery

本文實例講述了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程式碼：

複製程式碼 程式碼如下:

我想說：

jQuery程式碼：

複製程式碼 程式碼如下:

$("p").append("你好");

結果：

複製程式碼 程式碼如下:

我想說：你好

appendTo()

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

HTML程式碼：

複製程式碼 程式碼如下:

我想說：

jQuer程式碼：

複製程式碼 程式碼如下:

$("你好").appendTo(" p");

結果：

複製程式碼 程式碼如下:

我想說：你好

prepend()

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

HTML程式碼：

複製程式碼 程式碼如下:

我想說：

jQuer程式碼：

複製程式碼 程式碼如下:

$("p").prepend<"你好");

結果：

複製程式碼 程式碼如下:

你好我想說：

prependTo()

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

HTML程式碼：

複製程式碼 程式碼如下:

我想說：

jQuer程式碼：

複製程式碼 程式碼如下:

$("你好").prependTo(" p");

結果：

複製程式碼 程式碼如下:

你好我想說：

after()

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

HTML程式碼：

複製程式碼 程式碼如下:

我想說：

jQuer程式碼：

複製程式碼 程式碼如下:

$("p").after("你好");

結果：

複製程式碼 程式碼如下:

我想說：

你好

insertAfler()

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

HTML程式碼：

複製程式碼 程式碼如下:

我想說：

jQuer程式碼：

複製程式碼 程式碼如下:

$("你好").insertAfter(" p");

結果：

複製程式碼 程式碼如下:

我想說：

你好

before()

在每個符合的元素之前插入內容：

HTML程式碼：

複製程式碼 程式碼如下:

我想說：

jQuer程式碼：

複製程式碼 程式碼如下:

$("p").before("你好");

結果：

複製程式碼 程式碼如下:

你好

我想說：

insertBefore()

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

HTML程式碼：

複製程式碼 程式碼如下:

我想說：

jQuer程式碼：

複製程式碼 程式碼如下:

$("你好").insertBefore(" 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程序设计有所帮助。