首頁 > web前端 > js教程 > 如何透過jQuery新增新的內容

如何透過jQuery新增新的內容

清浅
發布: 2018-11-20 15:40:26
原創
3867 人瀏覽過



這篇文章介紹的是如何利用多種方法實現jQuery添加新的內容,有一定的參考價值,希望對大家有所幫助。

透過jQuery加入新的內容方法有多種,可以使用append()方法和prepend() 方法進行在被選元素的結尾和開頭插入內容。

推薦學習:【jQuery教學】

append()方法

append()方法在被選元素的結尾插入內容

$(selector).append(content);
 标签        内容
登入後複製

當我們點擊button時在p元素的後面加入hello文字

$("button").click(function(){
$("p").append(" <b>Hello</b>");
})
登入後複製

除了append()方法,還有一個appendTo()方法它兩個都是表示在元素的結尾插入內容但是當使用appendTo()時被選元素就要與內容反過來了

appendTo()方法

$(content).appendTo(selector)
  内容       标签
登入後複製

當我們點擊button時在p元素的後面加上hello文字

$("button").click(function(){
$("<b>Hello</b>").append(" p");
})
登入後複製

#prepend() 方法

#prepend() 方法在被選元素的開頭插入內容,用法與append()一樣

 reee

prependTo()方法

$(selector).prepend(content)
  标签      内容
登入後複製

程式碼展示                                      

Image 5.jpg

點選後效果圖片

Image 2.jpg

總結:以上就是這篇文章分享的內容了,希望對大家的學習jQuery添加內容有所幫助。




以上是如何透過jQuery新增新的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板