JQuery插入DOM節(jié)點的方法
本文實例講述了JQuery插入DOM節(jié)點的方法。分享給大家供大家參考。具體分析如下:
動態(tài)創(chuàng)建HTML元素并沒有實際用處,還需要將新創(chuàng)建的元素插入文檔中。將新創(chuàng)建的節(jié)點插入文檔最簡單的辦法是,讓它成為這個文檔的某個節(jié)點的子節(jié)點。前面使用了一個插入節(jié)點的方法append(),它會在元素內(nèi)部追加新創(chuàng)建的內(nèi)容。
將新創(chuàng)建的節(jié)點插入某個文檔的方法并非只有一種,在JQuery中還提供了其他兒種插入節(jié)點的方法,如下表所示。讀者可以根據(jù)實際需求靈活地做出多種選擇。
HTML DOM結(jié)構(gòu)如下:
<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()
向每個匹配的元素內(nèi)部追加內(nèi)容:
HTML代碼:
jQuery代碼:
結(jié)果:
appendTo()
將所有匹配的元素追加到指定的元素中。實際上,使用該方法是顛倒了常規(guī)的$(A).append(B)的操作,即不是將B追加到A中,而是將A追加到B中:
HTML代碼:
jQuer代碼:
結(jié)果:
prepend()
向每個匹配的元素內(nèi)部前置內(nèi)容:
HTML代碼:
jQuer代碼:
結(jié)果:
prependTo()
將所有匹配的元素前置到指定的元素中。實際上,使用該方法是顛倒了常規(guī)的$(A).prepend(B)的操作,即不是將B前置到A中,而是將A前置到B中:
HTML代碼:
jQuer代碼:
結(jié)果:
after()
在每個匹配的元索之后插入內(nèi)容:
HTML代碼:
jQuer代碼:
結(jié)果:
insertAfler()
將所有匹配的元素插入到指定元素的后面。實際上,使用該方法是顛倒了常規(guī)的$(A).after(B)的操作,即不是將B插入到A后面,而是將A插入到B后面:
HTML代碼:
jQuer代碼:
結(jié)果:
before()
在每個匹配的元素之前插入內(nèi)容:
HTML代碼:
jQuer代碼:
結(jié)果:
insertBefore()
將所有匹配的元素捅入到指定的元素的前面。實際上,使用該方法是顛倒了常規(guī)的$(A).before(B)的操作,即不是將B插入到A前面,而是將A插入到B前面:
HTML代碼:
jQuer代碼:
結(jié)果:
這些插入節(jié)點的方法不僅能將新創(chuàng)建的DOM元素插入到文檔中,也能對原有的DOM元素進(jìn)行移動。例如利用它們創(chuàng)建新元素并對其進(jìn)行插入操作:
$(function(){ var $li_1 = $("<li title='新增節(jié)點:數(shù)據(jù)結(jié)構(gòu)'>新增節(jié)點:數(shù)據(jù)結(jié)構(gòu)</li>"); // 創(chuàng)建第一個<li>元素 var $li_2 = $("<li title='新增節(jié)點:設(shè)計模式'>新增節(jié)點:設(shè)計模式</li>"); // 創(chuàng)建第二個<li>元素 var $li_3 = $("<li title='新增節(jié)點:計算機(jī)算法'>新增節(jié)點:計算機(jī)算法</li>"); // 創(chuàng)建第三個<li>元素 var $parent = $(".nm_ul"); // 獲取<ul>節(jié)點。<li>的父節(jié)點 var $two_li = $(".nm_ul li:eq(1)"); // 獲取<ul>節(jié)點中第二個<li>元素節(jié)點 $("#btn_1").click(function(){ $parent.append($li_1); // 添加到<ul>節(jié)點中,使之能在網(wǎng)頁中顯示 }); $("#btn_2").click(function(){ // 可以采取鏈?zhǔn)綄懛ǎ?parent.append($li_1).append($li_2); $parent.append($li_2); }); $("#btn_3").click(function(){ // insertAfter方法將創(chuàng)建的第三個<li>元素元素插入到獲取的<li>之后 $li_3.insertAfter($two_li); }); });
也利用它們對原有的DOM元素進(jìn)行移動:
$(function(){ var $one_li = $("ul li:eq(1)"); // 獲取<ul>節(jié)點中第二個<li>元素節(jié)點 var $two_li = $("ul li:eq(2)"); // 獲取<ul>節(jié)點中第三個<li>元素節(jié)點 $two_li.insertBefore($one_li); //移動節(jié)點 });
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- jquery實現(xiàn)在光標(biāo)位置插入內(nèi)容的方法
- 基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
- JQuery在光標(biāo)位置插入內(nèi)容的實現(xiàn)代碼
- jQuery 在光標(biāo)定位的地方插入文字的插件
- jQuery:節(jié)點(插入,復(fù)制,替換,刪除)操作
- 關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標(biāo)簽的寬高的問題
- jQuery實現(xiàn)在最后一個元素之前插入新元素的方法
- jquery插入兄弟節(jié)點的操作方法
- jQuery往textarea中光標(biāo)所在位置插入文本的方法
- jQuery?在圖片和文字中插入內(nèi)容實例