如何使用jQuery添加新內容

如何使用jQuery添加新內容？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

添加新內容的四個 jQuery 方法區別如下：

append() - 在被選元素（里面）的結尾插入內容

prepend() - 在被選元素（里面）的開頭插入內容

//jQuery append() 方法在被選元素的結尾插入內容。
$("p").append("Some appended text.");

//jQuery prepend() 方法在被選元素的開頭插入內容。
$("p").prepend("Some prepended text.");

通過 append() 和 prepend() 方法添加若干新元素

function appendText()
{
var txt1="<p>Text.</p>";        // 以 HTML 創建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 創建新元素
var txt3=document.createElement("p"); // 以 DOM 創建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);     // 追加新元素
}

after() - 在被選元素（外面）之后插入內容

before() - 在被選元素（外面）之前插入內容

$("img").after("Some text after");

$("img").before("Some text before");

通過 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);     // 在 img 之后插入新元素
}

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

看完上述內容，你們掌握如何使用jQuery添加新內容的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！