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.dbjr.com.cn'>腳本之家</a>");
 $("ul").append(str); //將動態(tài)創(chuàng)建的str元素追加到ul下面

追加節(jié)點

在js當(dāng)中追加節(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 () {
   //注意：如果傳進(jìn)來的jQuery對象是頁面中存在的元素，它會這個對象剪切，
   // 所以我們會發(fā)現(xià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>我要插隊。。。</p>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

JQuery select控件的相關(guān)操作實現(xiàn)代碼
JQuery獲取和設(shè)置Select選項方法匯總?cè)缦?，需要的朋友可以參考?/div> 2012-09-09
jQuery使用DataTable實現(xiàn)刪除數(shù)據(jù)后重新加載功能
利用jQuery Datatable和artTemplate組合來做的表格。但是當(dāng)刪除數(shù)據(jù)時，需要重新加載table里的數(shù)據(jù)。接下來通過本文給大家分享jQuery使用DataTable實現(xiàn)刪除數(shù)據(jù)后重新加載功能，需要的朋友參考下
2017-02-02
最新最熱最實用的15個jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實用的15款jQuery插件，都有著非常炫酷的效果，十分的實用，這里推薦給大家。
2015-07-07
jQuery+CSS實現(xiàn)一個側(cè)滑導(dǎo)航菜單代碼
側(cè)滑菜單在網(wǎng)站設(shè)計中應(yīng)用比較廣泛，在許多網(wǎng)站上都可以看到此種類型的菜單。本文給大家介紹jQuery+CSS實現(xiàn)一個側(cè)滑導(dǎo)航菜單代碼，需要的朋友參考下吧
2016-05-05
基于jQuery.i18n實現(xiàn)web前端的國際化
這篇文章主要介紹了基于jQuery.i18n實現(xiàn)web前端的國際化，具有很好的參考價值，希望對大家有所幫助
2018-05-05
JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端示例代碼
這篇文章主要介紹了JQuery如何以JSON方式提交數(shù)據(jù)到服務(wù)端,需要的朋友可以參考下
2014-05-05
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時會發(fā)現(xiàn)數(shù)據(jù)在ff正常，但在chrome與ie瀏覽器中post過去的數(shù)據(jù)全部是亂碼
2013-11-11
jQuery插件pagination實現(xiàn)分頁特效
jQuery分頁插件示例，ajax方式的jQuery前端分頁插件，其核心代碼jquery.pagination.js已隨示例打包，Demo中包括了5種不同的分頁效果演示，全部是Ajax無刷新方式實現(xiàn)分頁，對于搞前端開發(fā)的朋友來說，這是個值得收藏的代碼特效，為以后實現(xiàn)無刷新分頁提供方便。
2015-04-04
jQuery 版元素拖拽原型代碼
“元素拖拽”顧名思義：拖動，移動，拽放。有很多的解釋，而且在網(wǎng)上相關(guān)資料非常之多，本人在開發(fā) AsyncBox 當(dāng)中也用到此效果，借此分享，同時也是一種技術(shù)積累。
2011-04-04
Jquery選擇器簡明版?Jquery選擇器實用版
最近需要用jquery獲取一些dom數(shù)據(jù)的操作，發(fā)現(xiàn)jquery的選擇器非常強(qiáng)大，很方便進(jìn)行一些dom操作，下面就專門針對這塊內(nèi)容做個簡單的介紹,需要的朋友可以參考下
2023-05-05