jQuery中 DOM節(jié)點(diǎn)操作方法大全
append(content | fn)：向每個匹配的元素內(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()：這個方法是顛倒了常規(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()：向每個匹配的元素內(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)：
把所有匹配的元素前置到另一個、指定的元素元素集合中。實(shí)際上，使用這個方法是顛倒了常規(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()：在每個匹配的元素之后插入內(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()：在每個匹配的元素之前插入內(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()：把所有匹配的元素插入到另一個、指定的元素元素集合的后面。實(shí)際上，使用這個方法是顛倒了常規(guī)的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
例如：把所有段落插入到一個元素之后。與 $("#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()：把所有匹配的元素插入到另一個、指定的元素元素集合的前面。實(shí)際上，使用這個方法是顛倒了常規(guī)的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
例如：把所有段落插入到一個元素之前。與 $("#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)記最有用，而且它不會破壞原始文檔的語義品質(zhì)。這個函數(shù)的原理是檢查提供的第一個元素（它是由所提供的HTML標(biāo)記代碼動態(tài)生成的），并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素－－這個祖先元素就是包裹元素。當(dāng)HTML標(biāo)記代碼中的元素包含文本時無法使用這個函數(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()：這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素（以及他們的同輩元素）會在DOM結(jié)構(gòu)上替換他們的父元素。
例如：用ID是"content"的div將每一個段落包裹起來
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>
wrapAll()：將所有匹配的元素用單個元素包裹起來
例如：用一個生成的div將所有段落包裹起來
$("p").wrapAll("<div></div>");
或者
$("p").wrapAll(document.createElement("div"));
總結(jié)
以上所述是小編給大家介紹的jQuery中 DOM節(jié)點(diǎn)操作方法大全，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(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)文章
Bootstrap 3.x打印預(yù)覽背景色與文字顯示異常的解決
前幾天同事有個問題咨詢我，他在調(diào)用print()來打印頁面，發(fā)現(xiàn)打印預(yù)覽頁面上的背景色無法顯示以及文字總是顯示為黑色，感覺非常奇怪，我通過測試發(fā)現(xiàn)是Bootstrap的問題，現(xiàn)在將解決的方法分享給大家，希望可以幫助到同樣遇到這個問題的朋友們，下面來一起看看。2016-11-11
下面小編就為大家?guī)硪黄獨(dú)w納下js面向?qū)ο蟮膸追N常見寫法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript中async await更優(yōu)雅的錯誤處理方式
async/await中的異常處理很讓人混亂,盡管有很多種方式來應(yīng)對async 函數(shù)的異常,但是連經(jīng)驗豐富的開發(fā)者有時候也會搞錯,所以這篇文章主要給大家介紹了關(guān)于JavaScript中async await更優(yōu)雅的錯誤處理方式的相關(guān)資料,需要的朋友可以參考下2021-09-09
原生js實(shí)現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果
在本文將為大家介紹下如何用原生js和jQuery實(shí)現(xiàn)隨意改變div屬性，和重置，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
JavaScript實(shí)現(xiàn)圓形進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圓形進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了原生javascript獲取元素樣式的方法,需要的朋友可以參考下2014-12-12
js傳各種類型參數(shù)到Controller層的整理方式
這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript實(shí)現(xiàn)簡單計算器小功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單計算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JS驗證 只能輸入小數(shù)點(diǎn),數(shù)字,負(fù)數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S驗證 只能輸入小數(shù)點(diǎn),數(shù)字,負(fù)數(shù)的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JS連接SQL數(shù)據(jù)庫與ACCESS數(shù)據(jù)庫的方法實(shí)例
這篇文章主要介紹了JS連接SQL數(shù)據(jù)庫與ACCESS數(shù)據(jù)庫的方法實(shí)例，有需要的朋友可以參考一下2013-11-11