亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JQuery插入DOM節(jié)點(diǎn)的方法

 更新時(shí)間:2015年06月11日 09:53:36   作者:簡(jiǎn)明現(xiàn)代魔法  
這篇文章主要介紹了JQuery插入DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery實(shí)現(xiàn)DOM結(jié)點(diǎn)插入所涉及的常見函數(shù)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery插入DOM節(jié)點(diǎn)的方法。分享給大家供大家參考。具體分析如下:

動(dòng)態(tài)創(chuàng)建HTML元素并沒(méi)有實(shí)際用處,還需要將新創(chuàng)建的元素插入文檔中。將新創(chuàng)建的節(jié)點(diǎn)插入文檔最簡(jiǎn)單的辦法是,讓它成為這個(gè)文檔的某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)。前面使用了一個(gè)插入節(jié)點(diǎn)的方法append(),它會(huì)在元素內(nèi)部追加新創(chuàng)建的內(nèi)容。

將新創(chuàng)建的節(jié)點(diǎn)插入某個(gè)文檔的方法并非只有一種,在JQuery中還提供了其他兒種插入節(jié)點(diǎn)的方法,如下表所示。讀者可以根據(jù)實(shí)際需求靈活地做出多種選擇。

HTML DOM結(jié)構(gòu)如下:

<p class="nm_p" title="歡迎訪問(wèn)腳本之家" >歡迎訪問(wèn)腳本之家</p>
<ul class="nm_ul">
  <li title='PHP編程'>簡(jiǎn)單易懂的PHP編程</li>
  <li title='JavaScript編程'>簡(jiǎn)單易懂的JavaScript編程</li>
  <li title='JQuery編程'>簡(jiǎn)單易懂的JQuery編程</li>
</ul>

append()

向每個(gè)匹配的元素內(nèi)部追加內(nèi)容:

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuery代碼:
復(fù)制代碼 代碼如下:
$("p").append("<b>你好</b>");

結(jié)果:
復(fù)制代碼 代碼如下:
<p>我想說(shuō):<b>你好</b></p>

appendTo()

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

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuer代碼:
復(fù)制代碼 代碼如下:
$("<b>你好</b>").appendTo("p");

結(jié)果:
復(fù)制代碼 代碼如下:
<p>我想說(shuō):<b>你好</b></p>

prepend()

向每個(gè)匹配的元素內(nèi)部前置內(nèi)容:

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuer代碼:
復(fù)制代碼 代碼如下:
$("p").prepend<"<b>你好</b>");

結(jié)果:
復(fù)制代碼 代碼如下:
<p><b>你好</b>我想說(shuō):</p>

prependTo()

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

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuer代碼:
復(fù)制代碼 代碼如下:
$("<b>你好</b>").prependTo("p");

結(jié)果:
復(fù)制代碼 代碼如下:
<p><b>你好</b>我想說(shuō):</p>

after()

在每個(gè)匹配的元索之后插入內(nèi)容:

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuer代碼:
復(fù)制代碼 代碼如下:
$("p").after("<b>你好</b>");

結(jié)果:
復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p><b>你好</b>

insertAfler()

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

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuer代碼:
復(fù)制代碼 代碼如下:
$("<b>你好</b>").insertAfter("p");

結(jié)果:
復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p><b>你好</b>

before()

在每個(gè)匹配的元素之前插入內(nèi)容:

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuer代碼:
復(fù)制代碼 代碼如下:
$("p").before("<b>你好</b>");

結(jié)果:
復(fù)制代碼 代碼如下:
<b>你好</b><p>我想說(shuō):</p>

insertBefore()

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

HTML代碼:

復(fù)制代碼 代碼如下:
<p>我想說(shuō):</p>

jQuer代碼:
復(fù)制代碼 代碼如下:
$("<b>你好</b>").insertBefore("p");

結(jié)果:
復(fù)制代碼 代碼如下:
<b>你好</b><p>我想說(shuō):</p>

這些插入節(jié)點(diǎn)的方法不僅能將新創(chuàng)建的DOM元素插入到文檔中,也能對(duì)原有的DOM元素進(jìn)行移動(dòng)。例如利用它們創(chuàng)建新元素并對(duì)其進(jìn)行插入操作:

$(function(){
  var $li_1 = $("<li title='新增節(jié)點(diǎn):數(shù)據(jù)結(jié)構(gòu)'>新增節(jié)點(diǎn):數(shù)據(jù)結(jié)構(gòu)</li>"); // 創(chuàng)建第一個(gè)<li>元素
  var $li_2 = $("<li title='新增節(jié)點(diǎn):設(shè)計(jì)模式'>新增節(jié)點(diǎn):設(shè)計(jì)模式</li>"); // 創(chuàng)建第二個(gè)<li>元素
  var $li_3 = $("<li title='新增節(jié)點(diǎn):計(jì)算機(jī)算法'>新增節(jié)點(diǎn):計(jì)算機(jī)算法</li>"); // 創(chuàng)建第三個(gè)<li>元素
  var $parent = $(".nm_ul"); // 獲取<ul>節(jié)點(diǎn)。<li>的父節(jié)點(diǎn)
  var $two_li = $(".nm_ul li:eq(1)"); // 獲取<ul>節(jié)點(diǎn)中第二個(gè)<li>元素節(jié)點(diǎn)
  $("#btn_1").click(function(){
    $parent.append($li_1); // 添加到<ul>節(jié)點(diǎn)中,使之能在網(wǎng)頁(yè)中顯示
  });
  $("#btn_2").click(function(){
    // 可以采取鏈?zhǔn)綄懛ǎ?parent.append($li_1).append($li_2);
    $parent.append($li_2);   
  });
  $("#btn_3").click(function(){
    // insertAfter方法將創(chuàng)建的第三個(gè)<li>元素元素插入到獲取的<li>之后
    $li_3.insertAfter($two_li); 
  });
});

也利用它們對(duì)原有的DOM元素進(jìn)行移動(dòng):

$(function(){
  var $one_li = $("ul li:eq(1)"); // 獲取<ul>節(jié)點(diǎn)中第二個(gè)<li>元素節(jié)點(diǎn)
  var $two_li = $("ul li:eq(2)"); // 獲取<ul>節(jié)點(diǎn)中第三個(gè)<li>元素節(jié)點(diǎn)
  $two_li.insertBefore($one_li); //移動(dòng)節(jié)點(diǎn)
});

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論