jquery追加元素的所有方法全面深入實(shí)例講解(append、prepend、after、before、wrap等等)
幾乎所有網(wǎng)站的開發(fā)都離不開jQuery,jQuery可以很方便的實(shí)現(xiàn)網(wǎng)頁中的一些效果,也很輕松的對(duì)網(wǎng)頁中的一些DIV元素進(jìn)行添加,修改或刪除的操作。由于不同位置追加元素的代碼不一樣,本文實(shí)例講解如何對(duì)網(wǎng)頁中某個(gè)指定的DIV進(jìn)行元素的追加操作。
append() 方法
append()方法在被選元素的結(jié)尾(在內(nèi)部)插入指定內(nèi)容。
$("p").append(" <b>Hello world!</b>");
? <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); }); </script> </head> <body> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加列表項(xiàng)</button> </body> </html> ?
appendTo() 方法
appendTo() 方法在被選元素的結(jié)尾(在內(nèi)部)插入指定內(nèi)容,與append()方法作用一樣。
$("<b>Hello World!</b>").appendTo("p");
prepend() 方法
prepend() 方法在被選元素的開頭(在內(nèi)部)插入內(nèi)容。
$("p").prepend("Some prepended text.");
實(shí)例
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend(" <b>Appended text</b>."); }); }); </script> </head> <body> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加列表項(xiàng)</button> </body> </html>
可以發(fā)現(xiàn)append()
是給被選元素內(nèi)部的結(jié)尾處添加新元素,prepend()
是給被選元素內(nèi)部的最前面添加
after() 方法
after() 方法在被選元素之后(在外面)插入內(nèi)容。
$("p").after("<p>Hello world!</p>");
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").after(" <b>Appended text</b>."); }); }); </script> </head> <body> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加列表項(xiàng)</button> </body> </html>
before() 方法
before() 方法在被選元素之前(在外面)插入內(nèi)容。
$("img").before("Some text before");
還可以使用FOR循環(huán)進(jìn)行動(dòng)態(tài)變化的元素的追加;
<script> //循環(huán)追加動(dòng)態(tài)元素 var nll= $('.topnav>li').length; for(var i=1;i<=nll;i++){ $('.topnav>li:nth-child('+i+')>a').append(i); } </script>
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").before(" <b>Appended text</b>."); }); }); </script> </head> <body> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加列表項(xiàng)</button> </body> </html>
可以看出before()是給被選元素外部的前面添加,after()是給被選元素外部的后面添加的
wrap() 方法
wrap() 方法可以給某個(gè)元素添加父元素包裹。
$(".ftmeau a").wrap('<span>');
CSS3中的before和after偽類
除了使用JQUERY追加元素之外,還可以使用CSS3中的before和after偽類來追加素材;
.topnav li:nth-child(1) a:before{content:url(images/iconnav01.png);}
晉級(jí)知識(shí)擴(kuò)展
before和insertBefore
二者效果相同,只不過語法不一樣,寫法不同
$(content).insertBefore(selector)
$(selector).before(content);
參數(shù) | 描述 |
---|---|
content | 必需。規(guī)定要插入的內(nèi)容(必須包含 HTML 標(biāo)簽)。 注意:如果 content 是已存在的元素,它將從它的當(dāng)前位置被移除,并被插入在被選元素之前。 |
selector | 必需。規(guī)定在何處插入內(nèi)容。 |
<div id="content" style="background-color: red;">我是原來的content</div> <script src="./jquery-1.11.1.js"></script> <script> $("#content").before("<span>我是新插入的元素</span>") //或者用insertBefore,二者效果相同,只不過寫法不同 //$("<span>我是新插入的元素</span>").insertBefore("#content") </script> //語句執(zhí)行后的HTML結(jié)構(gòu)如下 <span>我是新插入的元素</span> <div id="content" style="background-color: red;">我是原來的content</div>
after和insertAfter
after和insertAfter同上before和insertBefore,只是位置不同
append和appendTo
append和appendTo 同上before和insertBefore,只是位置不同
插入已有元素
insertBefore() 方法在每個(gè)被選元素前插入一個(gè)已有元素。
appendTo() 方法在每個(gè)被選元素的結(jié)尾插入已有的元素。
<script> $(document).ready(function(){ $("#test1").click(function(){ $("h1").appendTo("p"); }); $("#test2").click(function(){ $("h2").insertBefore("div"); }); $("#test3").click(function(){ $("h3").insertAfter("p"); }); }); </script> <h1>這是一個(gè)標(biāo)題</h1> <h2>這是一個(gè)標(biāo)題2</h2> <h3>這是一個(gè)標(biāo)題3</h3> <p>這是一個(gè)段落。</p> <div>這是另一個(gè)段落。</div> <button id="test1">移除現(xiàn)h1元素并在P元素結(jié)尾插入h1元素</button> <button id="test2">移除h2元素并在div元素之前插入它</button> <button id="test3">移除h3元素并在P元素后面插入它</button>
添加若干新元素
append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素??梢酝ㄟ^ jQuery 來生成文本/HTML(就像上面的例子那樣),或者通過 JavaScript 代碼和 DOM 元素。
after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素??梢酝ㄟ^ text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。
<script> function fangfa(){ var txt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素 var txt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本 $("img").before(txt1,txt2,txt3); // 在圖片后添加文本 $("div").append(txt1,txt2,txt3); // div后追加新元素 $("div").prepend(txt1,txt2,txt3); // div前追加新元素 } </script> <p>第一行</p> <img src="/images/logo2.png" > <div>第三行</div> <button onclick="fangfa()">之后插入</button>
總結(jié):
append/prepend 是在選擇元素內(nèi)部嵌入。
after/before 是在元素外面追加。
到此這篇關(guān)于jquery追加元素的所有方法全面深入實(shí)例講解(append、prepend、after、before、wrap等等)的文章就介紹到這了,更多相關(guān)jquery追加元素的所有方法實(shí)例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
BootStrap table表格插件自適應(yīng)固定表頭(超好用)
這篇文章主要介紹了BootStrap table表格插件自適應(yīng)固定表頭(超好用)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法,涉及jQuery針對(duì)頁面屬性與樣式動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06jQuery實(shí)現(xiàn)ichat在線客服插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ichat在線客服插件,需要的朋友可以參考下2014-12-12jquery tools 系列 scrollable學(xué)習(xí)
今天繼續(xù)jquery tools六大功能之第三功能 scrollable的學(xué)習(xí)。一如既往,首先給出操作的html代碼 此html代碼修改自jquery tools官方網(wǎng)站demo代碼2009-09-09EasyUI框架 使用Ajax提交注冊信息的實(shí)現(xiàn)代碼
這篇文章主要介紹了EasyUI框架 使用Ajax提交注冊信息的實(shí)現(xiàn)代碼的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09jQuery自動(dòng)切換/點(diǎn)擊切換選項(xiàng)卡效果的小例子
我們看到很多網(wǎng)站會(huì)有有錯(cuò)誤404頁面,當(dāng)頁面不存存時(shí)就會(huì)提示,然后過幾秒就會(huì)自動(dòng)跳到首頁了,下面我來給大家舉一個(gè)404錯(cuò)誤頁面跳到首頁實(shí)例,有需要的朋友可以參考一下2013-08-08