jQuery中 DOM節(jié)點(diǎn)操作方法大全
append(content | fn):
向每個(gè)匹配的元素內(nèi)部追加內(nèi)容。參考:http://jquery.cuishifeng.cn/append.html
例如:向所有段落中追加一些HTML標(biāo)記。
<p>I would like to say: </p> $("p").append("<b>Hello</b>"); [ <p>I would like to say: <b>Hello</b></p> ]
appendTo():這個(gè)方法是顛倒了常規(guī)的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中
例如:把所有段落追加到ID值為foo的元素中。
<p>I would like to say: </p> <div></div><div></div> $("p").appendTo("div"); <div><p>I would like to say: </p></div> <div><p>I would like to say: </p></div>
prepend():向每個(gè)匹配的元素內(nèi)部前置內(nèi)容
例如:向所有段落中前置一些HTML標(biāo)記代碼。
<p>I would like to say: </p> $("p").prepend("<b>Hello</b>"); [ <p><b>Hello</b>I would like to say: </p> ]
prependTo(content):
把所有匹配的元素前置到另一個(gè)、指定的元素元素集合中。實(shí)際上,使用這個(gè)方法是顛倒了常規(guī)的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
例如:把所有段落追加到ID值為foo的元素中。
<p>I would like to say: </p><div id="foo"></div> $("p").prependTo("#foo"); <div id="foo"><p>I would like to say: </p></div>
after():在每個(gè)匹配的元素之后插入內(nèi)容。插入的元素和被插入的元素屬于同一級,非父子級關(guān)系
例如:在所有段落之后插入一些HTML標(biāo)記代碼。
<p>I would like to say: </p> $("p").after("<b>Hello</b>"); <p>I would like to say: </p><b>Hello</b>
before():在每個(gè)匹配的元素之前插入內(nèi)容。
例如:在所有段落之前插入一些HTML標(biāo)記代碼
<p>I would like to say: </p> $("p").before("<b>Hello</b>"); [ <b>Hello</b><p>I would like to say: </p> ]
insertAfter():把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的后面。實(shí)際上,使用這個(gè)方法是顛倒了常規(guī)的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面
例如:把所有段落插入到一個(gè)元素之后。與 $("#foo").after("p")相同
<p>I would like to say: </p><div id="foo">Hello</div> $("p").insertAfter("#foo"); <div id="foo">Hello</div><p>I would like to say: </p>
insertBefore():把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的前面。實(shí)際上,使用這個(gè)方法是顛倒了常規(guī)的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
例如:把所有段落插入到一個(gè)元素之前。與 $("#foo").before("p")相同。
<div id="foo">Hello</div><p>I would like to say: </p> $("p").insertBefore("#foo"); <p>I would like to say: </p><div id="foo">Hello</div>
wrap():把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來。
這種包裝對于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用,而且它不會(huì)破壞原始文檔的語義品質(zhì)。這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素(它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裹元素。當(dāng)HTML標(biāo)記代碼中的元素包含文本時(shí)無法使用這個(gè)函數(shù)。因此,如果要添加文本應(yīng)該在包裹完成之后再行添加。
例如:用于包裝目標(biāo)元素的DOM元素
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />'; }); <div class="container"> <div class="Hello"> <div class="inner">Hello</div> </div> <div class="Goodbye"> <div class="inner">Goodbye</div> </div> </div>
unwrap():這個(gè)方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素(以及他們的同輩元素)會(huì)在DOM結(jié)構(gòu)上替換他們的父元素。
例如:用ID是"content"的div將每一個(gè)段落包裹起來
<div> <p>Hello</p> <p>cruel</p> <p>World</p> </div> $("p").unwrap() <p>Hello</p> <p>cruel</p> <p>World</p>
wrapAll():將所有匹配的元素用單個(gè)元素包裹起來
例如:用一個(gè)生成的div將所有段落包裹起來
$("p").wrapAll("<div></div>");
或者
$("p").wrapAll(document.createElement("div"));
總結(jié)
以上所述是小編給大家介紹的jQuery中 DOM節(jié)點(diǎn)操作方法大全,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法詳解(推薦)
- jQuery DOM插入節(jié)點(diǎn)操作指南
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例
- jQuery DOM刪除節(jié)點(diǎn)操作指南
- 淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流
- 有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄
- jquery對dom節(jié)點(diǎn)的操作【推薦】
- JQuery常見節(jié)點(diǎn)操作實(shí)例分析
相關(guān)文章
javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹
最常用的是style屬性,在JavaScript中,通過document.getElementById(id).style.XXX就可以獲取到XXX的值,但意外的是,這樣做只能取到通過內(nèi)嵌方式設(shè)置的樣式值,即style屬性里面設(shè)置的值。2010-05-05ionic中列表項(xiàng)增加和刪除的實(shí)現(xiàn)方法
在項(xiàng)目中遇到表單似的頁面,需要進(jìn)行增加一行和減少一行的操作,基于ionic怎么實(shí)現(xiàn)呢?下面小編給大家分享ionic中列表項(xiàng)增加和刪除的實(shí)現(xiàn)方法,一起看看吧2017-01-01詳解JavaScript 中g(shù)etElementsByName在IE中的注意事項(xiàng)
這篇文章主要介紹了詳解JavaScript 中g(shù)etElementsByName在IE中的注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2017-02-02

關(guān)于使用runtimeStyle屬性問題討論文章

基于JavaScript中標(biāo)識(shí)符的命名規(guī)則介紹

d3.js入門教程之?dāng)?shù)據(jù)綁定詳解