JQuery插入DOM節(jié)點(diǎn)的方法
本文實(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代碼:
jQuery代碼:
結(jié)果:
appendTo()
將所有匹配的元素追加到指定的元素中。實(shí)際上,使用該方法是顛倒了常規(guī)的$(A).append(B)的操作,即不是將B追加到A中,而是將A追加到B中:
HTML代碼:
jQuer代碼:
結(jié)果:
prepend()
向每個(gè)匹配的元素內(nèi)部前置內(nèi)容:
HTML代碼:
jQuer代碼:
結(jié)果:
prependTo()
將所有匹配的元素前置到指定的元素中。實(shí)際上,使用該方法是顛倒了常規(guī)的$(A).prepend(B)的操作,即不是將B前置到A中,而是將A前置到B中:
HTML代碼:
jQuer代碼:
結(jié)果:
after()
在每個(gè)匹配的元索之后插入內(nèi)容:
HTML代碼:
jQuer代碼:
結(jié)果:
insertAfler()
將所有匹配的元素插入到指定元素的后面。實(shí)際上,使用該方法是顛倒了常規(guī)的$(A).after(B)的操作,即不是將B插入到A后面,而是將A插入到B后面:
HTML代碼:
jQuer代碼:
結(jié)果:
before()
在每個(gè)匹配的元素之前插入內(nèi)容:
HTML代碼:
jQuer代碼:
結(jié)果:
insertBefore()
將所有匹配的元素捅入到指定的元素的前面。實(shí)際上,使用該方法是顛倒了常規(guī)的$(A).before(B)的操作,即不是將B插入到A前面,而是將A插入到B前面:
HTML代碼:
jQuer代碼:
結(jié)果:
這些插入節(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ì)有所幫助。
- jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法
- 基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
- JQuery在光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
- jQuery 在光標(biāo)定位的地方插入文字的插件
- jQuery:節(jié)點(diǎn)(插入,復(fù)制,替換,刪除)操作
- 關(guān)于用Jquery的height()、width()計(jì)算動(dòng)態(tài)插入的IMG標(biāo)簽的寬高的問(wèn)題
- jQuery實(shí)現(xiàn)在最后一個(gè)元素之前插入新元素的方法
- jquery插入兄弟節(jié)點(diǎn)的操作方法
- jQuery往textarea中光標(biāo)所在位置插入文本的方法
- jQuery?在圖片和文字中插入內(nèi)容實(shí)例
相關(guān)文章
jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
本文主要分享了jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03JQUERY簡(jiǎn)單按鈕輪換選中效果實(shí)現(xiàn)方法
這篇文章主要介紹了JQUERY簡(jiǎn)單按鈕輪換選中效果實(shí)現(xiàn)方法,涉及jQuery鼠標(biāo)事件與css樣式操作的基本技巧,需要的朋友可以參考下2015-05-05jQuery調(diào)用ajax請(qǐng)求的常見方法匯總
這篇文章主要介紹了jQuery調(diào)用ajax請(qǐng)求的常見方法,實(shí)例匯總了三種常見的jQuery調(diào)用Ajax的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03用Jquery.load載入頁(yè)面實(shí)現(xiàn)局部刷新
用jquery.load的方法載入新的頁(yè)面,以實(shí)現(xiàn)局部刷新,可結(jié)果發(fā)現(xiàn)載入進(jìn)來(lái)的頁(yè)面與原來(lái)單獨(dú)的頁(yè)面不一樣,樣式?jīng)]了,關(guān)于這個(gè)問(wèn)題,下面有個(gè)不錯(cuò)的解決方法2014-01-01jQuery中ajax和post處理json的不同示例對(duì)比
用了post方法去處理ajax回調(diào)的json數(shù)據(jù),死活取不到,后臺(tái)就是有json返回了,關(guān)于這個(gè)問(wèn)題的解決方法如下,你若遇到可以看看2014-11-11