用於新增新內容的四個 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
- 6個新jQuery技術讓你的設計內容更有趣jQuery
- jQuery元素內容操作的方法有多少種?jQuery
- jquery如何新增一個新的元素節點jQuery
- jQuery Mobile修改button的內容jQuery
- jQuery load()方法載入指定檔案內容jQuery
- Python四種逐行讀取檔案內容的方法Python
- jquery實現的設定指定元素的文字內容和html內容jQueryHTML
- jQuery如何清空表單元素的內容jQuery
- jquery獲取具有指定內容的元素jQuery
- jQuery中的常用內容總結(二)jQuery
- jQuery中的常用內容總結(三)jQuery
- jQuery中的常用內容總結(一)jQuery
- 新媒體工作內容有哪些?新媒體學習方法
- 請問用什麼方法可以讀到一個文字檔案的內容?
- 如何從 ABAP 偵錯程式裡提取某個內表的內容用於單元測試
- PHP8的一些新特性之新增三個實用的字串方法PHP字串
- jquery實現改變所匹配的內容jQuery
- 使用jquery清空指定元素中的所有內容jQuery
- jquery如何在li元素列表的開頭新增一個新li元素jQuery
- jQuery - 設定內容和屬性jQuery
- jQuery - 獲取內容和屬性jQuery
- jQuery文字框輸入內容同步jQuery
- jQuery內容橫向拖拽滾動jQuery
- 盤點:文字內容安全領域 深度學習的六個主流應用方法深度學習
- jquery給元素新增樣式表的方法jQuery
- jquery如何在元素的開頭新增新的元素jQuery
- 關於新版jquery用on()方法代替live方法的正確使用方式jQuery
- 3個基於Node.js的內容管理系統Node.js
- oracle新增主鍵的四種方法:Oracle
- 用PHP換個思路讀取WORD內容PHP
- Awk給檔案中的行前後新增內容
- js如何動態為指定的元素新增內容JS
- jquery如何在元素內追加新的元素jQuery
- jQuery table內容點選標題排序jQuery排序
- jQuery文字框內容輸入同步功能jQuery
- jQuery獲取元素內部元素和獲取內容的區別、獲得輸入框value的方法jQuery
- 聊聊開始資料治理前必須瞭解的四個內容