用於新增新內容的四個 jQuery 方法

金木大大大發表於2023-12-18

  透過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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章