jQuery కెల్లెక్టర్లను జోడించడం

జూనిక్స్ ద్వారా కొత్త కెల్లెక్టర్లను/అంతరాలను సులభంగా జోడించవచ్చు.

కొత్త HTML అంతరాలను జోడించడం

మేము కొత్త అంతరాలను జోడించడానికి ఉపయోగించే నాలుగు jQuery మాదిరిగా నేర్చుకుంటాము:

  • append() - ఎండ్స్ కెల్లెక్టర్ తల్లె అంతరం జోడించడం
  • prepend() - ఎండ్స్ కెల్లెక్టర్ ముందు అంతరం జోడించడం
  • after() - ఎండ్స్ కెల్లెక్టర్ తల్లె అంతరం జోడించడం
  • before() - ఎండ్స్ కెల్లెక్టర్ ముందు అంతరం జోడించడం

jQuery append() మాదిరిగా

jQuery append() మాదిరిగా ఎండ్స్ కెల్లెక్టర్ల తల్లె అంతరం జోడిస్తుంది.

ఉదాహరణ

$("p").append("కొన్ని అపెండెడ్ టెక్స్ట్.");

మీరే ప్రయత్నించండి

jQuery prepend() మాదిరిగా

jQuery prepend() మాదిరిగా ఎండ్స్ కెల్లెక్టర్ల ముందు అంతరం జోడిస్తుంది.

ఉదాహరణ

$("p").prepend("కొన్ని ప్రీపెండెడ్ టెక్స్ట్.");

మీరే ప్రయత్నించండి

append() మరియు prepend() మాదిరిగా కొన్ని కొత్త కెల్లెక్టర్లను జోడించడం

పైన ఉన్న ఉదాహరణలో, మేము ఎండ్స్ కెల్లెక్టర్లకు మాత్రమే టెక్స్ట్/HTML ను జోడించాము.

అయితే, append() మరియు prepend() మాదిరిగా పరామీతమైన సంఖ్యలో కొత్త కెల్లెక్టర్లను అంగీకరిస్తాయి. జూనిక్స్ ద్వారా టెక్స్ట్/HTML ను సృష్టించవచ్చు (పైన ఉన్న ఉదాహరణ విధంగా) లేదా JavaScript కోడ్ మరియు DOM కెల్లెక్టర్ల ద్వారా.

ఈ ఉదాహరణలో, మేము కొన్ని కొత్త కెల్లెక్టర్లను సృష్టిస్తాము. ఈ కెల్లెక్టర్లు text/HTML, jQuery లేదా JavaScript/DOM ద్వారా సృష్టించబడవచ్చు. ఆపై మేము append() మాదిరిగా ఈ కొత్త కెల్లెక్టర్లను పాఠంలోకి జోడిస్తాము (prepend() కూడా అదే విధంగా చేయవచ్చు):

ఉదాహరణ

function appendText()
{
var txt1="<p>టెక్స్ట్.</p>";               // హెచ్ఎంఎల్ ద్వారా కొత్త కెల్లెక్టర్ సృష్టించడం
var txt2=$("<p></p>").text("టెక్స్ట్.");   // జూనిక్స్ ద్వారా కొత్త కెల్లెక్టర్ సృష్టించడం
var txt3=document.createElement("p");  // DOM ద్వారా కొత్త అంశాన్ని సృష్టించండి
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // కొత్త అంశాన్ని అనుబంధం చేయండి
}

మీరే ప్రయత్నించండి

jQuery after() మరియు before() పద్ధతులు

jQuery after() పద్ధతి ఎంపికచేసిన అంశం తర్వాత అంశాన్ని జోడిస్తుంది.

jQuery before() పద్ధతి ఎంపికచేసిన అంశం ముందు అంశాన్ని జోడిస్తుంది.

ఉదాహరణ

$("img").after("Some text after");
$("img").before("Some text 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);          // img తర్వాత కొత్త అంశాన్ని జోడించండి
}

మీరే ప్రయత్నించండి

jQuery HTML పరికల్పనా పుస్తకం

జూనియర్ ɖɛɭɯ HTML పద్ధతులకు పూర్తి వివరాలు కోసం ఈ పరికల్పనా పుస్తకాన్ని సందర్శించండి: