jQuery中appendTo()方法用法實例
本文實例講述了jQuery中appendTo()方法用法。分享給大家供大家參考。具體分析如下:
此方法把匹配的元素插入指定元素結(jié)尾,插入位置在元素的內(nèi)部。appendTo()
方法的作用和append()
方法是相同的,但是語法是不同的,盡管形式一樣。
定義和用法
appendTo() 方法在被選元素的結(jié)尾插入 HTML 元素。
提示:如需在被選元素的開頭插入 HTML 元素,請使用 prependTo() 方法。
語法
$(content).appendTo(selector)
參數(shù) | 描述 |
---|---|
content | 必需。規(guī)定要插入的內(nèi)容(必須包含 HTML 標簽)。 注意:如果 content 是已存在的元素,它將從當前位置被移除,并在被選元素的結(jié)尾被插入。 |
selector | 必需。規(guī)定把內(nèi)容追加到哪個元素上。 |
演示代碼一
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>腳本之家(jb51.net)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("<span>Hello World!</span>").appendTo("p"); }); }); </script> </head> <body> <button>在每個P元素結(jié)尾插入span元素。</button> <p>這是一個段落。</p> <p>這是另一個段落。</p> </body> </html>
實例代碼二:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.dbjr.com.cn/" /> <title>appendTo()函數(shù)-腳本之家</title> <style type="text/css"> p{ ? height:100px; ? width:100px; ? border:1px solid blue; } div{ ? height:200px; ? width:200px; ? border:1px solid green; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ ? $("button").click(function(){ ??? $("p").appendTo("div"); ? }) }) </script> </head> <body> <p>我是p的內(nèi)容</p> <div>我是div</div> <button>點擊查看效果</button> </body> </html>
以上代碼中,當點擊按鈕的時候,能夠?qū)元素移動到div元素的內(nèi)部的尾部。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- jQuery添加新內(nèi)容的四個常用方法分析【append,prepend,after,before】
- 解決jQuery使用append添加的元素事件無效的問題
- jquery append與appendTo方法比較
- jquery?追加元素append、prepend、before、after用法與區(qū)別分析
- jquery在ie7下選擇器的問題導致append失效的解決方法
- jquery append 動態(tài)添加的元素事件on 不起作用的解決方案
- jQuery使用append在html元素后同時添加多項內(nèi)容的方法
- 解決Jquery向頁面append新元素之后事件的綁定問題
- jQuery中append()方法用法實例
- JS實現(xiàn)jQuery的append功能
相關(guān)文章
jQuery實現(xiàn)網(wǎng)頁頂部固定導航效果代碼
這篇文章主要介紹了jQuery實現(xiàn)網(wǎng)頁頂部固定導航效果代碼,涉及jQuery響應(yīng)scroll事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-12-12jQuery Selectors(選擇器)的使用(九、表單對象屬性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實例方式進行講述,以簡單,全面為基礎(chǔ),不會涉及很深,我的學習方法:先入門,后進階!2009-12-12利用jquery如何從json中讀取數(shù)據(jù)追加到html中
這篇文章主要給大家介紹了關(guān)于利用jquery如何從json中讀取數(shù)據(jù)追加到html中的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編一起來看看吧。2017-12-12修改jQuery.Autocomplete插件 支持中文輸入法 避免TAB、ENTER鍵失效、導致表單提交
jQuery.Autocomplete 是jquery的流行插件,能夠很好的實現(xiàn)輸入框的自動完成(autocomplete)、建議提示(input suggest)功能,支持ajax數(shù)據(jù)加載。2009-10-10在瀏覽器中實現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
這篇文章主要介紹了在瀏覽器中實現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南,需要的朋友可以參考下2014-12-12jQuery插件jPaginate實現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。2015-05-05Jquery ajax執(zhí)行順序 返回自定義錯誤信息(實例講解)
由于Jquery中的Ajax的async默認是true(異步請求),如果想一個Ajax執(zhí)行完后再執(zhí)行另一個Ajax, 需要把async=false就可以了2013-11-11