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

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

下面小編就為大家?guī)硪黄猨Query動態(tài)創(chuàng)建元素以及追加節(jié)點的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

例如：

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

追加節(jié)點

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

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

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

after在元素后面追加，同級

befor在元素的前面追加，同級

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

<!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 () {
   //注意：如果傳進來的jQuery對象是頁面中存在的元素，它會這個對象剪切，
   // 所以我們會發(fā)現(xiàn)點擊后，最下面的p標簽被剪切了
   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標簽1</div>
<p>我要插隊。。。</p>
</body>
</html>

以上就是小編為大家?guī)淼膉Query動態(tài)創(chuàng)建元素以及追加節(jié)點的實現(xiàn)方法全部內容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

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