jQuery中appendTo()方法用法實(shí)例

更新時(shí)間：2023年06月18日 01:01:36 投稿：shichen2014

這篇文章主要介紹了jQuery中appendTo()方法用法,實(shí)例分析了appendTo()方法的功能、定義及把匹配的元素插入指定元素結(jié)尾的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中appendTo()方法用法。分享給大家供大家參考。具體分析如下：

此方法把匹配的元素插入指定元素結(jié)尾，插入位置在元素的內(nèi)部。
appendTo()方法的作用和append()方法是相同的，但是語(yǔ)法是不同的，盡管形式一樣。

定義和用法

appendTo() 方法在被選元素的結(jié)尾插入 HTML 元素。

提示：如需在被選元素的開(kāi)頭插入 HTML 元素，請(qǐng)使用 prependTo() 方法。

語(yǔ)法

$(content).appendTo(selector)

參數(shù)	描述
content	必需。規(guī)定要插入的內(nèi)容（必須包含 HTML 標(biāo)簽）。注意：如果 content 是已存在的元素，它將從當(dāng)前位置被移除，并在被選元素的結(jié)尾被插入。
selector	必需。規(guī)定把內(nèi)容追加到哪個(gè)元素上。

演示代碼一

<!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>在每個(gè)P元素結(jié)尾插入span元素。</button>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
</body>
</html>

實(shí)例代碼二:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<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>點(diǎn)擊查看效果</button>
</body>
</html>

以上代碼中，當(dāng)點(diǎn)擊按鈕的時(shí)候，能夠?qū)元素移動(dòng)到div元素的內(nèi)部的尾部。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery $.getJSON()跨域請(qǐng)求
以前總是沒(méi)搞明白是怎么回事，現(xiàn)在是迫不得已，就仔細(xì)看了看說(shuō)明文檔，終于測(cè)試成功了，記下
2011-12-12
JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕的實(shí)現(xiàn)代碼
頁(yè)面中需要實(shí)現(xiàn)某個(gè)按鈕點(diǎn)擊完后，禁用它，并顯示倒計(jì)時(shí)。這個(gè)默認(rèn)是3秒，代碼很簡(jiǎn)單
2012-03-03
利用jquery禁止外層滾動(dòng)條的滾動(dòng)
這篇文章主要給大家介紹了利用jquery如何禁止外層滾動(dòng)條的滾動(dòng),文中給出了詳細(xì)的示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-01-01
JQuery中Bind()事件用法分析
這篇文章主要介紹了JQuery中Bind()事件用法,實(shí)例分析了Bind()事件的功能、特點(diǎn)與綁定事件時(shí)的使用技巧,需要的朋友可以參考下
2015-05-05
Tinymce+jQuery.Validation使用產(chǎn)生的BUG
在IE6下，當(dāng)頁(yè)面有advanced模式的Tinymce編輯器，并且，并且jquery.validation使用了jquery.metadata時(shí)會(huì)出現(xiàn)以下問(wèn)題
2010-03-03
jQuery 學(xué)習(xí)入門篇附實(shí)例代碼
這篇文章比較不錯(cuò)，更重要的是一些實(shí)例代碼，對(duì)于想學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的資料。
2010-03-03
jQuery+.net實(shí)現(xiàn)瀏覽更多內(nèi)容(改編php版本)
改編自php版本這里記錄.net 下的實(shí)現(xiàn);首先創(chuàng)建數(shù)據(jù)庫(kù)表test，并插入一些測(cè)試數(shù)據(jù)接下來(lái)建立一個(gè)html文件，感興趣的朋友可以參考下哈，希望您可以幫助到你
2013-03-03
jquery 步驟進(jìn)度軸插件的實(shí)現(xiàn)代碼
今天給大家分享一個(gè)jquery插件之步驟進(jìn)度軸的實(shí)現(xiàn)思路，這個(gè)功能在一些網(wǎng)站注冊(cè)賬號(hào)時(shí)一般都會(huì)用到，今天就通過(guò)實(shí)例代碼給大家詳細(xì)介紹下，感興趣的朋友跟隨小編一起看看吧
2021-05-05
jQuery獲取選中單選按鈕radio的值
本文給大家分享兩段實(shí)例代碼給大家講解jquery獲取選中單選按鈕radio的值，非常不錯(cuò)，具有參考借鑒價(jià)值，一起看看吧
2016-12-12
jquery刪除指定子元素代碼實(shí)例
這篇文章主要介紹了jquery刪除指定子元素代碼實(shí)例,本文使用較簡(jiǎn)單的方法實(shí)現(xiàn)了這個(gè)需求,代碼一看就懂,需要的朋友可以參考下
2015-01-01