快捷導(dǎo)航

jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法

更新時(shí)間：2016年10月20日 09:32:09 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

我們知道js中有三種動(dòng)態(tài)創(chuàng)建元素的方法，jQuery中也可以動(dòng)態(tài)的創(chuàng)建元素

例如：

 var str = $("<a href='http://www.fzitv.net'>腳本之家</a>");
 $("ul").append(str); //將動(dòng)態(tài)創(chuàng)建的str元素追加到ul下面

追加節(jié)點(diǎn)

在js當(dāng)中追加節(jié)點(diǎn)的方法是appendChild(節(jié)點(diǎn)元素)和insertBefor(節(jié)點(diǎn)元素，位置)，在jQuery中是

append 追加在父元素的最后一個(gè)子節(jié)點(diǎn)后面

prepend插入到父元素的第一個(gè)子節(jié)點(diǎn)前面

after在元素后面追加，同級(jí)

befor在元素的前面追加，同級(jí)

下面的代碼可以很好的演示追加節(jié)點(diǎn)

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div {
   width: 200px;
   height: 100px;
   border: 1px solid red;
  }
 </style>

 <script src="jquery-1.12.2.js"></script>
 <script>
  $(function () {
   //注意：如果傳進(jìn)來(lái)的jQuery對(duì)象是頁(yè)面中存在的元素，它會(huì)這個(gè)對(duì)象剪切，
   // 所以我們會(huì)發(fā)現(xiàn)點(diǎn)擊后，最下面的p標(biāo)簽被剪切了
   var p1 = $("p");
   $("#btn1").click(function () {
    $("div").append(p1);
   });
   $("#btn2").click(function () {
    $("div").prepend(p1);
   });
   $("#btn3").click(function () {
    $("div").after(p1);
   });
   $("#btn4").click(function () {
    $("div").before(p1);
   });
  });
 </script>
</head>
<body>
<input type="button" id="btn1" value="btnAppend"/>
<input type="button" id="btn2" value="btnPrepend"/>
<input type="button" id="btn3" value="btnAfter"/>
<input type="button" id="btn4" value="btnBefore"/>
<div>div標(biāo)簽1</div>
<p>我要插隊(duì)。。。</p>
</body>
</html>

以上就是小編為大家?guī)?lái)的jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

jQuery代碼優(yōu)化事件委托篇
隨著DOM結(jié)構(gòu)的復(fù)雜化和Ajax等動(dòng)態(tài)腳本技術(shù)的運(yùn)用，事件委托自然浮出了水面
2011-11-11
淺析jQuery的鏈?zhǔn)秸{(diào)用之each函數(shù)
如果對(duì)于jquery的$()包裝器函數(shù)還不是很清楚，請(qǐng)先參閱我的上一篇日志：淺析jQuery的鏈?zhǔn)秸{(diào)用
2010-12-12
jquery 中toggle的2種用法詳解(推薦)
下面小編就為大家?guī)?lái)一篇jquery 中toggle的2種用法詳解(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
jquery基礎(chǔ)教程之deferred對(duì)象使用方法
jquery基礎(chǔ)教程之deferred對(duì)象使用方法
2014-01-01
jquery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象導(dǎo)致了內(nèi)存溢出
在園子里面看到kuibono的文章說(shuō)JQuery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象，并且在每次Ajax請(qǐng)求之后都會(huì)創(chuàng)建一個(gè)新的xmlHttpRequest對(duì)象，感到驚訝，索性寫了一個(gè)程序驗(yàn)正了一下，果然如kuibono所言
2012-06-06
基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼
倒計(jì)時(shí)效果在我們的日常生活中經(jīng)常會(huì)用到，比如說(shuō)高考倒計(jì)時(shí)、元旦放假倒計(jì)時(shí)、春節(jié)放假倒計(jì)時(shí)等等，下面通過(guò)本篇文章給大家分享基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼，對(duì)jquery倒計(jì)時(shí)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
在網(wǎng)站上應(yīng)該用的30個(gè)jQuery插件整理
jQuery插件是網(wǎng)頁(yè)設(shè)計(jì)師最喜歡的。從圖像滑塊，圖像畫廊和導(dǎo)航插件，它們是如此眾多，如此多樣，如此驚人的和互動(dòng)可以制作美化網(wǎng)站
2011-11-11
jquery創(chuàng)建div 實(shí)現(xiàn)代碼
有時(shí)候我們需要?jiǎng)討B(tài)創(chuàng)建一個(gè)div下面是具體的實(shí)現(xiàn)代碼，大家只要熟悉了jquery的一些基本用法就能輕松的實(shí)現(xiàn)。
2009-04-04
利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event事件處理
做WEB前端開發(fā)的人都知道不同的瀏覽器對(duì)事件的處理方式是有區(qū)別的。
2009-12-12
巧用jquery解決下拉菜單被Div遮擋的相關(guān)問(wèn)題
本篇文章主要是對(duì)巧用jquery解決下拉菜單被Div遮擋的相關(guān)問(wèn)題進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02