jquery追加元素的方法有哪些

這篇文章主要介紹“jquery追加元素的方法有哪些”，在日常操作中，相信很多人在jquery追加元素的方法有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”jquery追加元素的方法有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

append() 方法

append()方法在被選元素的結(jié)尾（在內(nèi)部）插入指定內(nèi)容。

$("p").append(" <b>Hello world!</b>");

appendTo() 方法

appendTo() 方法在被選元素的結(jié)尾（在內(nèi)部）插入指定內(nèi)容，與append()方法作用一樣。

$("<b>Hello World!</b>").appendTo("p");

prepend() 方法

prepend() 方法在被選元素的開(kāi)頭（在內(nèi)部）插入內(nèi)容。

$("p").prepend("Some prepended text.");

after() 方法

after() 方法在被選元素之后（在外面）插入內(nèi)容。

$("p").after("<p>Hello world!</p>");

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>

wrap() 方法

wrap() 方法可以給某個(gè)元素添加父元素包裹。

$(".ftmeau a").wrap('<span>');

CSS3中的before和after偽類

除了使用JQUERY追加元素之外，還可以使用CSS3中的before和after偽類來(lái)追加素材；

.topnav li:nth-child(1) a:before{content:url(images/iconnav01.png);}

晉級(jí)知識(shí)擴(kuò)展

before和insertBefore

二者效果相同，只不過(guò)語(yǔ)法不一樣，寫(xiě)法不同

$(content).insertBefore(selector)

$(selector).before(content);

<div id="content" >我是原來(lái)的content</div>
<script src="./jquery-1.11.1.js"></script>
<script>
     $("#content").before("<span>我是新插入的元素</span>")
     //或者用insertBefore,二者效果相同，只不過(guò)寫(xiě)法不同
     //$("<span>我是新插入的元素</span>").insertBefore("#content")
</script>
 
//語(yǔ)句執(zhí)行后的HTML結(jié)構(gòu)如下
<span>我是新插入的元素</span>
<div id="content" >我是原來(lái)的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(){
		$("h2").appendTo("p");
	  });
	  $("#test2").click(function(){
		$("h3").insertBefore("div");
	  });
	  $("#test3").click(function(){
		$("h4").insertAfter("p");
	  });
	  
});
</script>

<h2>這是一個(gè)標(biāo)題</h2>
<h3>這是一個(gè)標(biāo)題2</h3>
<h4>這是一個(gè)標(biāo)題3</h4>
<p>這是一個(gè)段落。</p>
<div>這是另一個(gè)段落。</div>
<button id="test1">移除現(xiàn)h2元素并在P元素結(jié)尾插入h2元素</button>
<button id="test2">移除h3元素并在div元素之前插入它</button>
<button id="test3">移除h4元素并在P元素后面插入它</button>

添加若干新元素

append() 和 prepend() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素?？梢酝ㄟ^(guò) jQuery 來(lái)生成文本/HTML（就像上面的例子那樣），或者通過(guò) JavaScript 代碼和 DOM 元素。

after() 和 before() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素?？梢酝ㄟ^(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(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>

到此，關(guān)于“jquery追加元素的方法有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！