jQuery kuongeza elementu

Kwa jQuery, itakuwa rahisi sana kuingiza elementu/ujumbe jipya.

Kuingiza ujumbe wa HTML jipya

Tutafikia watu wengi wanaotumia method za jQuery kuongeza ujumbe jipya:

  • append() - Kuongeza ujumbe kwenye kisha ya elementu hili
  • prepend() - Kuongeza ujumbe kwenye kwanza ya elementu hili
  • after() - Kuongeza ujumbe kwenye elementu hili kwenye kisha
  • before() - Kuongeza ujumbe kwenye elementu hili kwenye kwanza

Method ya jQuery append()

Method ya jQuery append() inaongeza ujumbe kwenye kisha ya elementu hili.

Mfano

$("p").append("Matini ya kisha.");

Jifunze kwa uwekezaji wako

Method ya jQuery prepend()

Method ya jQuery prepend() inaongeza ujumbe kwenye kwanza ya elementu hili.

Mfano

$("p").prepend("Matini ya kwanza.");

Jifunze kwa uwekezaji wako

Kuongeza elementu zaidi kwa append() na prepend() method

Kwenye matokeo hii, tumekuwaonyesha text/HTML kwenye kwanza/kisha ya elementu hili.

Inafaa kuwa kwamba method za append() na prepend() zinapokea ujumbe wa uadilifu kwa ulezi ujumbe. Inaweza kuwaonyesha text/HTML kwa jQuery (kama matokeo ya juu hapa) au kwa uandishi wa JavaScript na DOM elementu.

Kwenye matokeo hii, tumekuwaonyesha elementu zaidi. Elementu hizi zinaweza kuwaonyeshwa kwa text/HTML, jQuery au JavaScript/DOM. Kisha tumekuwaonyesha elementu hizi kwenye matini kwa sababu ya uendeshaji append() (kwa prepend() kina huzungumza kwa ujumbe huo):

Mfano

function appendText()
{
var txt1="<p>Matini.</p>";               // Kuwaonyesha elementu kwa HTML
var txt2=$("<p></p>").text("Matini.");   // Kuwaonyesha elementu jipya kwa jQuery
var txt3=document.createElement("p");  // Kuzengera elementi kwa kutumia DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Inaongeza elementi kandakea p
{}

Jifunze kwa uwekezaji wako

Method ya after() na before() ya jQuery

Method ya after() ya jQuery inaingiza matukio kwenye kandakea kwa elementi ya kuzalishwa

Method ya before() ya jQuery inaingiza matukio kwenye kandakea kwa elementi ya kuzalishwa

Mfano

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

Jifunze kwa uwekezaji wako

Kuingiza elementi zaidi kwa kutumia after() na before()

Method ya after() na before() inaombwa kwa uwezo wa kumpata uadilifu wa elementi zaidi sana. Elementi zingepoza kwa text/HTML, jQuery au JavaScript/DOM.

Kwenye maelezo hii, tumekuja kuzengera elementi nyingi. Hizi elementi zingepoza kwa text/HTML, jQuery au JavaScript/DOM. Kisha tunaweza kuingiza elementi hizi kwenye matukio kwa kutumia method ya after() (kama kwa method ya before()):

Mfano

function afterText()
{
var txt1="<b>I </b>";                    // Kuzengera elementi kwa kutumia HTML
var txt2=$("<i></i>").text("love ");     // Kuzengera elementi kwa kutumia jQuery
var txt3=document.createElement("big");  // Kuzengera elementi kwa kutumia DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Inaongeza elementi kandakea img
{}

Jifunze kwa uwekezaji wako

Kitabu cha mifano cha jQuery HTML

Kwa maadili ya jinsi ya kuhusiana na hatua za HTML ya jQuery, tafadhali nifungue kwenye kitabu cha mifano chako hapa: