用於新增新內容的四個 jQuery 方法
透過jQuery,可以很容易地新增新元素/內容。
新增新的HTML內容
我們將學習用於新增新內容的四個jQuery方法:
append()-在被選元素的結尾插入內容
prepend()-在被選元素的開頭插入內容
after()-在被選元素之後插入內容
before()-在被選元素之前插入內容
jQuery append()方法
jQuery append()方法在被選元素的結尾插入內容(仍然在該元素的內部)。
例項
$("p").append("追加文字");
;//爬蟲IP獲取;
jQuery prepend()方法
jQuery prepend()方法在被選元素的開頭插入內容。
例項
$("p").prepend("在開頭追加文字");
嘗試一下»
透過append()和prepend()方法新增若干新元素
在上面的例子中,我們只在被選元素的開頭/結尾插入文字/HTML。
不過,append()和prepend()方法能夠透過引數接收無限數量的新元素。可以透過jQuery來生成文字/HTML(就像上面的例子那樣),或者透過JavaScript程式碼和DOM元素。
在下面的例子中,我們建立若干個新元素。這些元素可以透過text/HTML、jQuery或者JavaScript/DOM來建立。然後我們透過append()方法把這些新元素追加到文字中(對prepend()同樣有效):
例項
function appendText(){
var txt1="<p>文字-1。</p>";//使用HTML標籤建立文字
var txt2=$("<p></p>").text("文字-2。");//使用jQuery建立文字
var txt3=document.createElement("p");
txt3.innerHTML="文字-3。";//使用DOM建立文字text with DOM
$("body").append(txt1,txt2,txt3);//追加新元素
}
jQuery after()和before()方法
jQuery after()方法在被選元素之後插入內容。
jQuery before()方法在被選元素之前插入內容。
例項
$("img").after("在後面新增文字");
$("img").before("在前面新增文字");
透過after()和before()方法新增若干新元素
after()和before()方法能夠透過引數接收無限數量的新元素。可以透過text/HTML、jQuery或者JavaScript/DOM來建立新元素。
在下面的例子中,我們建立若干新元素。這些元素可以透過text/HTML、jQuery或者JavaScript/DOM來建立。然後我們透過after()方法把這些新元素插到文字中(對before()同樣有效):
例項
function afterText()
{
var txt1="<b>I</b>";//使用HTML建立元素
var txt2=$("<i></i>").text("love");//使用jQuery建立元素
var txt3=document.createElement("big");//使用DOM建立元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);//在圖片後新增文字
}
來自 “ ITPUB部落格 ” ,連結:https://blog.itpub.net/70032566/viewspace-3000432/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- jquery js 設定 div 的內容,給 div 新增一個屬性jQueryJS
- jQuery元素內容操作的方法有多少種?jQuery
- jquery實現改變所匹配的內容jQuery
- jQuery - 獲取內容和屬性jQuery
- jQuery - 設定內容和屬性jQuery
- jQuery內容橫向拖拽滾動jQuery
- PHP8的一些新特性之新增三個實用的字串方法PHP字串
- 如何從 ABAP 偵錯程式裡提取某個內表的內容用於單元測試
- jQuery table內容點選標題排序jQuery排序
- 用python寫一個指令碼,讀取srt檔案中的內容,並列印出重複的內容,且將不重複的內容儲存到新檔案中Python指令碼
- 新媒體工作內容有哪些?新媒體學習方法
- 盤點:文字內容安全領域 深度學習的六個主流應用方法深度學習
- Js/JQuery下拉框新增新選項JSjQuery
- 修改網頁內容的方法網頁
- 中文Rhino 8新增內容介紹
- 在 Linux 中把使用者新增到組的四個方法Linux
- Jquery如何獲取和設定元素內容?jQuery
- Awk給檔案中的行前後新增內容
- 用PHP換個思路讀取WORD內容PHP
- Pact:流媒體對新內容的出價高於廣播
- jQuery寫的文章內容頁右側浮動滾動jQuery
- git修改歷史內容的方法Git
- 聊聊開始資料治理前必須瞭解的四個內容
- jQuery 新增元素jQuery
- 聚焦RSA 2020 |綠盟抗DDoS方案更新四個重要內容
- 請教個關於IDEA Tomcat伺服器內容IdeaTomcat伺服器
- PHP獲取HTTP body內容的方法PHPHTTP
- 基於thincmf的內容管理系統
- jQuery捕獲-獲取DOM元素內容和屬性jQuery
- 010-jQuery獲取和設定內容屬性jQuery
- robotframework 使用jQuery處理頁面display隱藏內容FrameworkjQuery
- jQuery點選文字框清除內容程式碼例項jQuery
- Go 語言之父介紹泛型:增添三個新的主要內容Go泛型
- 新儲存賦能內容創新,杉巖榮獲第二屆中國內容科技創業大賽內容科技創新獎創業
- 新媒體內容創作的3個超實用萬能開頭金句!打造屬於你的10萬+創意素材 | 黎想
- 基於 Bootstrap 和 jQuery 的 checkbox 的應用bootjQuery
- .NET CORE下最快比較兩個檔案內容是否相同的方法
- 用於快取http介面內容的gin高效能中介軟體快取HTTP