幾乎所有網(wǎng)站的開發(fā)都離不開jQuery，jQuery可以很方便的實現(xiàn)網(wǎng)頁中的一些效果，也很輕松的對網(wǎng)頁中的一些DIV元素進行添加，修改或刪除的操作。由于不同位置追加元素的代碼不一樣，本文實例講解如何對網(wǎng)頁中某個指定的DIV進行元素的追加操作。

append() 方法

append()方法在被選元素的結尾（在內(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">追加列表項</button>
</body>
</html>
?

appendTo() 方法

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

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

prepend() 方法

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

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

實例

<!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">追加列表項</button>
</body>
</html>

可以發(fā)現(xiàn)append()是給被選元素內(nèi)部的結尾處添加新元素，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">追加列表項</button>
</body>
</html>

before() 方法

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

$("img").before("Some text before");

還可以使用FOR循環(huán)進行動態(tài)變化的元素的追加；

<script>
//循環(huán)追加動態(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">追加列表項</button>
</body>
</html>

可以看出before（）是給被選元素外部的前面添加，after（）是給被選元素外部的后面添加的

wrap() 方法

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

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

CSS3中的before和after偽類

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

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

晉級知識擴展

before和insertBefore

二者效果相同，只不過語法不一樣，寫法不同

$(content).insertBefore(selector)

$(selector).before(content);

參數(shù)	描述
content	必需。規(guī)定要插入的內(nèi)容（必須包含 HTML 標簽）。注意：如果 content 是已存在的元素，它將從它的當前位置被移除，并被插入在被選元素之前。
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結構如下
<span>我是新插入的元素</span>
<div id="content" style="background-color: red;">我是原來的content</div>

after和insertAfter

after和insertAfter同上before和insertBefore，只是位置不同

append和appendTo

append和appendTo 同上before和insertBefore，只是位置不同

插入已有元素

insertBefore() 方法在每個被選元素前插入一個已有元素。

appendTo() 方法在每個被選元素的結尾插入已有的元素。

<script>
$(document).ready(function(){
	  $("#test1").click(function(){
		$("h1").appendTo("p");
	  });
	  $("#test2").click(function(){
		$("h2").insertBefore("div");
	  });
	  $("#test3").click(function(){
		$("h3").insertAfter("p");
	  });
	  
});
</script>

<h1>這是一個標題</h1>
<h2>這是一個標題2</h2>
<h3>這是一個標題3</h3>
<p>這是一個段落。</p>
<div>這是另一個段落。</div>
<button id="test1">移除現(xiàn)h1元素并在P元素結尾插入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>

總結：

append/prepend 是在選擇元素內(nèi)部嵌入。

after/before 是在元素外面追加。

到此這篇關于jquery追加元素的所有方法全面深入實例講解（append、prepend、after、before、wrap等等）的文章就介紹到這了,更多相關jquery追加元素的所有方法實例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

jquery追加元素的所有方法全面深入實例講解（append、prepend、after、before、wrap等等）

目錄

append() 方法

appendTo() 方法

prepend() 方法

after() 方法

before() 方法

wrap() 方法

CSS3中的before和after偽類

晉級知識擴展

before和insertBefore

after和insertAfter

append和appendTo

插入已有元素

添加若干新元素

總結：

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

jquery追加元素的所有方法全面深入實例講解（append、prepend、after、before、wrap等等）

目錄

append() 方法

appendTo() 方法

prepend() 方法

after() 方法

before() 方法

wrap() 方法

CSS3中的before和after偽類

晉級知識擴展

before和insertBefore

after和insertAfter

append和appendTo

插入已有元素

添加若干新元素

總結：

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

jquery追加元素的所有方法全面深入實例講解（append、prepend、after、before、wrap等等）