jquery追加元素的所有方法全面深入實(shí)例講解（append、prepend、after、before、wrap等等）
幾乎所有網(wǎng)站的開發(fā)都離不開jQuery，jQuery可以很方便的實(shí)現(xiàn)網(wǎng)頁中的一些效果，也很輕松的對網(wǎng)頁中的一些DIV元素進(jìn)行添加，修改或刪除的操作。由于不同位置追加元素的代碼不一樣，本文實(shí)例講解如何對網(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)文章
由于各個(gè)瀏覽器中原生事件對象的 差異性 ，多數(shù) JS庫/框架 都或多或少的對原生事件對象進(jìn)行了修復(fù)及包裝。2011-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)樹形員工信息表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了jQuery搜索子元素的方法,實(shí)例分析了children、find等方法的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery點(diǎn)縮略圖彈出層顯示大圖片的方法，思路非常不錯(cuò)，這里推薦給大家。2015-02-02
這篇文章主要介紹了深入理解bootstrap框架之第二章整體架構(gòu)的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)左右輪播圖效果，經(jīng)常用于購物網(wǎng)站的首頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了jquery清空表單數(shù)據(jù)的示例,需要的朋友可以參考下2014-02-02
jquery中郵箱地址 URL網(wǎng)站地址正則驗(yàn)證實(shí)例代碼
QQ網(wǎng)站有一個(gè)網(wǎng)站舉報(bào)的功能，看了一些js代碼覺得寫得很不錯(cuò)，我就拿下來了，下面是一個(gè)email驗(yàn)證與url網(wǎng)址驗(yàn)證js代碼，分享給大家2013-09-09
jquery Validation表單驗(yàn)證使用詳解
功能強(qiáng)大的 jquery 表單驗(yàn)證插件，適用于日常的 E-mail、電話號(hào)碼、網(wǎng)址等驗(yàn)證及 Ajax 驗(yàn)證，除自身擁有豐富的驗(yàn)證規(guī)則外，還可以添加自定義的驗(yàn)證規(guī)則。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+2015-04-04
jquery ztree實(shí)現(xiàn)模糊搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)模糊搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02