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