జావాస్క్రిప్ట్ అనేది HTML (హైపర్ టెక్స్ట్ మార్కప్ లాంగ్వేజ్) మాదిరిగానే మూలకాల యొక్క సృష్టి మరియు తారుమారుని అనుమతించే బహుముఖ ప్రోగ్రామింగ్ భాష. ఇది ఈ ఫంక్షనాలిటీని నిర్వహించడానికి “append()” మరియు “appendChild()” పద్ధతులను అనుసరిస్తుంది. వారి పేరు సూచించినట్లుగా, రెండు పద్ధతులు స్ట్రింగ్ లేదా నోడ్ ఆబ్జెక్ట్‌ల వంటి HTML మూలకాలను జతచేస్తాయి. అయినప్పటికీ, అవి వాటి కార్యాచరణలు మరియు ఇతర కారకాలపై ఆధారపడి ఒకదానికొకటి భిన్నంగా ఉంటాయి.
ఈ గైడ్ j క్వెరీ ' మధ్య కీలక వ్యత్యాసాలను నొక్కి చెబుతుంది జోడించు ()' మరియు జావాస్క్రిప్ట్ ' అనుబంధం చైల్డ్ ()' పద్ధతులు.
j క్వెరీ మధ్య వ్యత్యాసాలకు వెళ్లే ముందు ' జోడించు ()' మరియు జావాస్క్రిప్ట్ ' అనుబంధం చైల్డ్ ()” పద్ధతులు, మొదట ఈ పద్ధతుల యొక్క ప్రాథమికాలను చూడండి.
j క్వెరీ అనుబంధం() విధానం అంటే ఏమిటి?
j క్వెరీ ' జోడించు ()' పద్ధతిలో కావలసిన 'నోడ్' మరియు 'స్ట్రింగ్' ఆబ్జెక్ట్‌లను చివరిలో పేరెంట్ ఎలిమెంట్ యొక్క చివరి చైల్డ్‌గా ఇన్సర్ట్ చేస్తుంది.
వాక్యనిర్మాణం
$ ( సెలెక్టర్ ) . జోడించు ( విషయము , ఫంక్షన్ ( సూచిక , html ) )పై వాక్యనిర్మాణంలో:
- విషయము : ఇది HTML మూలకాలు, DOM మూలకాలు లేదా j క్వెరీ ఆబ్జెక్ట్‌లను సూచిస్తుంది.
- ఫంక్షన్ : ఇది 'ఇండెక్స్ (ఎలిమెంట్ స్థానం)' మరియు 'html (ఎంచుకున్న మూలకాల యొక్క html)' పారామితులను కలిగి ఉన్న వినియోగదారు నిర్వచించిన JavaScript ఫంక్షన్‌ను పేర్కొనే అదనపు పరామితి.
JavaScript appendChild() విధానం అంటే ఏమిటి?
“appendChild()” పద్ధతి మాతృ మూలకం యొక్క చివరి చైల్డ్ తర్వాత మాత్రమే “నోడ్” ఆబ్జెక్ట్‌ను జోడిస్తుంది. ఇది మొదట “createElement()” పద్ధతిని ఉపయోగించి కావలసిన నోడ్ ఆబ్జెక్ట్‌ను సృష్టిస్తుంది మరియు దానిని జతచేస్తుంది.
వాక్యనిర్మాణం
మూలకం. అనుబంధం చైల్డ్ ( నోడ్ )ఈ వాక్యనిర్మాణానికి ఒక పారామీటర్ మాత్రమే అవసరం, అంటే, ' నోడ్ ”.
వారి పేర్లు సూచించినట్లుగా, పైన చర్చించిన పద్ధతులు ఒకదానికొకటి భిన్నంగా ఉంటాయి. ఈ విభాగం అవి భిన్నమైన కొన్ని కారకాలను గుర్తించింది. వాటిని ఒకసారి చూద్దాం.
j క్వెరీ అనుబంధం() మరియు JavaScript appendChild() పద్ధతి మధ్య తేడాలు
| నిబంధనలు | j క్వెరీ అనుబంధం() | JavaScript appendChild() |
|---|---|---|
| వాడుక | కొత్త “ని జోడించడం ద్వారా పేరెంట్ ఎలిమెంట్‌ను జోడించడానికి ఇది ఉపయోగించవచ్చు నోడ్ 'మరియు' స్ట్రింగ్ ”అదే సమయంలో వస్తువులు. | ఇది కొత్త ' ద్వారా పేరెంట్ ఎలిమెంట్‌ను జోడించడానికి మాత్రమే ఉపయోగించబడుతుంది నోడ్ '' ఉపయోగించి సృష్టించబడింది ఎలిమెంట్ సృష్టించండి ()' పద్ధతి. |
| బహుళ నోడ్ వస్తువులు | ది ' జోడించు ()” పద్ధతి అనేక నోడ్ ఆబ్జెక్ట్‌లను దాని అనుబంధిత పేరెంట్ ఎలిమెంట్‌లో ఒకే సమయంలో కింది ఫార్మాట్‌లో జోడించగలదు. ఫార్మాట్ : 'div.append(మొదటి బిడ్డ, రెండవ బిడ్డ, 'Linuxhint');' |
ది ' అనుబంధం చైల్డ్ ()” పద్ధతి బహుళ నోడ్ ఆబ్జెక్ట్‌లతో బాగా పని చేస్తుంది కానీ ఇది ఒక సమయంలో మొదటి బిడ్డను మరియు తరువాతి బిడ్డను మాత్రమే జత చేస్తుంది. ఫార్మాట్ : 'div.appendChild(మొదటి బిడ్డ, రెండవ బిడ్డ, 'Linuxhint');' |
| రిటర్న్ విలువ | ది ' జోడించు ()' పద్ధతి అనుబంధించబడిన నోడ్ ఆబ్జెక్ట్‌ను తిరిగి ఇవ్వదు ఎందుకంటే ఇది 'నిర్వచించబడని' తిరిగి విలువను చూపుతుంది, అనగా. ఫార్మాట్ : console.log(appendChildValue) // నిర్వచించబడలేదు |
మరోవైపు, ' అనుబంధం చైల్డ్ ()” పద్ధతి జోడించిన నోడ్ ఆబ్జెక్ట్‌ని కలిగి ఉన్న విలువను అందిస్తుంది. ఫార్మాట్ : console.log(appendChildValue) //
|
ఇప్పుడు జాబితా చేయబడిన కీలక వ్యత్యాసాల ఆచరణాత్మక అమలుకు వెళ్లండి.
తేడా 1: j క్వెరీ అనుబంధం() మరియు JavaScript appendChild() పద్ధతులను వర్తింపజేయడం
మొదటి వ్యత్యాసం ప్రకారం, ' జోడించు ()” పద్ధతి నోడ్ మరియు స్ట్రింగ్ రెండింటినీ జోడిస్తుంది, అయితే “appendChild()” పద్ధతి నోడ్ ఆబ్జెక్ట్‌లను మాత్రమే జోడిస్తుంది.
HTML కోడ్
ముందుగా, పేర్కొన్న HTML కోడ్‌ను చూడండి:
< శరీరం >< h2 > j క్వెరీ 'అనుబంధం()' పద్ధతి < / h2 > //అనుబంధం కోసం() < h2 > j క్వెరీ 'appendChild()' పద్ధతి < / h2 > //అపెండ్ చైల్డ్()
< బటన్ id = 'btn1' క్లిక్ చేయండి = 'myFunc1()' > DOM స్ట్రింగ్‌ని జత చేయండి < / బటన్ >
< బటన్ id = 'btn2' క్లిక్ చేయండి = 'myFunc2()' > DOM నోడ్‌ని జత చేయండి < / బటన్ >
< p id = 'కోసం' > ఇది ఒక పేరా. < / p >
< ఓల్ id = 'జాబితా' >
< అని > జావాస్క్రిప్ట్ ట్యుటోరియల్ 1 < / అని >
< అని > జావాస్క్రిప్ట్ ట్యుటోరియల్ 2 < / అని >
< అని > జావాస్క్రిప్ట్ ట్యుటోరియల్ 3 < / అని >
< / ఓల్ >
< / శరీరం >
పై కోడ్ లైన్లలో:
- '
' ట్యాగ్ స్థాయి 2 యొక్క ఉపశీర్షికను నిర్వచిస్తుంది.
- “
- జోడించిన స్ట్రింగ్ విలువను చూపడానికి “
” ట్యాగ్ కేటాయించిన id “para”తో ఖాళీ పేరాను సృష్టిస్తుంది.
- “
- ” ట్యాగ్ id “జాబితా”తో ఆర్డర్ చేయబడిన జాబితాను మరియు “
- ” ట్యాగ్‌ల సహాయంతో జాబితా చేయబడిన అంశాలను జోడిస్తుంది.
గమనిక : “append()” మరియు “appendChild()” పద్ధతులలో మొదటి తేడాలో పైన వ్రాసిన HTML కోడ్‌ని అనుసరించండి.
'append()' మెథడ్ j క్వెరీ కోడ్
ముందుగా, “append()” పద్ధతి j క్వెరీ కోడ్ యొక్క అవలోకనం:
< తల >< స్క్రిప్ట్ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > స్క్రిప్ట్ >
< స్క్రిప్ట్ >
$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( '#btn1' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( 'p' ) . జోడించు ( ' అనుబంధ స్ట్రింగ్ .' ) ;
} ) ;
$ ( '#btn2' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( 'ఓల్' ) . జోడించు ( '
} ) ;
} ) ;
స్క్రిప్ట్ >
తల >
పై కోడ్ లైన్లలో:
- మొదట, j క్వెరీని పేర్కొనండి ' CDN 'దాని అధికారిక వెబ్‌సైట్ నుండి మార్గం' https://jquery.com/ '' సహాయంతో src ' గుణం.
- తర్వాత, ముందుగా “ని ఉపయోగించే చిన్న స్క్రిప్ట్ విభాగాన్ని జోడించండి సిద్ధంగా ()' తెలిపిన వాటిని అమలు చేసే పద్ధతి ' ఫంక్షన్ ()” HTML పత్రం లోడ్ అయినప్పుడు.
- ఆ తరువాత, ' క్లిక్ చేయండి ()' పద్ధతి 'ఐడి' బటన్‌తో లింక్ చేయబడిన ఫంక్షన్‌ను అమలు చేస్తుంది btn1 ” బటన్ క్లిక్ మీద.
- ఫంక్షన్ నిర్వచనంలో, ' జోడించు పేర్కొన్న స్ట్రింగ్‌తో లక్ష్యం చేయబడిన పేరా ఎలిమెంట్‌ను జోడించడానికి ()” పద్ధతి ఉపయోగించబడుతుంది.
- జోడించిన ' కోసం అదే ప్రక్రియ జరుగుతుంది ఆర్డర్ చేసిన జాబితా ” అంటే, నోడ్ ఆబ్జెక్ట్‌ని ఇచ్చిన ఐటెమ్‌కు జోడించడానికి.
అవుట్‌పుట్
ఇక్కడ, “స్ట్రింగ్” మరియు “నోడ్” ఆబ్జెక్ట్‌లు రెండూ “అపెండ్()” పద్ధతి సహాయంతో జతచేయబడినట్లు నిర్ధారించబడింది.
“appendChild()” పద్ధతి జావాస్క్రిప్ట్ కోడ్
ఇప్పుడు, JavaScript “appendChild()” పద్ధతిని ఆచరణాత్మకంగా చూడండి:
< స్క్రిప్ట్ >ఫంక్షన్ myFunc1 ( ) {
కోసం. అనుబంధం చైల్డ్ ( '
అనుబంధ స్ట్రింగ్
' ) //DOM స్ట్రింగ్‌ను జోడించు} ఫంక్షన్ myFunc2 ( ) {
స్థిరంగా మూలకం = పత్రం. ఎలిమెంట్ సృష్టించండి ( 'అది' ) ;
స్థిరంగా నోడ్ = పత్రం. టెక్స్ట్‌నోడ్‌ని సృష్టించండి ( 'అనుబంధ అంశం' ) ;
మూలకం. అనుబంధం చైల్డ్ ( నోడ్ ) ; //DOM నోడ్‌ను జోడించు
స్థిరంగా మూలకం = పత్రం. getElementById ( 'జాబితా' ) ;
మూలకం. అనుబంధం చైల్డ్ ( మూలకం ) ;
}
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో:
- ఫంక్షన్ పేరును నిర్వచించండి ' myFunc1 ()” అందించిన స్ట్రింగ్‌తో జోడించిన పేరాని జోడించడానికి “appendChild()” పద్ధతిని ఉపయోగిస్తుంది.
- తరువాత, 'లో myFunc2 ()” ఫంక్షన్, “createElement()” పద్ధతి కొత్త జాబితా మూలకాన్ని సృష్టిస్తుంది మరియు “createTextNode()” పద్ధతిని ఉపయోగించి దానికి కొంత వచనాన్ని జోడిస్తుంది.
- ఆ తర్వాత, “appendChild()” పద్ధతిని ఉపయోగించి సృష్టించిన జాబితా నోడ్‌ని దాని టెక్స్ట్‌తో జత చేయండి.
- చివరగా, 'appendChild()' పద్ధతి సహాయంతో 'జాబితా' ఐడి ఉన్న యాక్సెస్ చేయబడిన ఆర్డర్ జాబితాకు కొత్తగా సృష్టించబడిన జాబితా నోడ్‌ను జత చేయండి.
అవుట్‌పుట్
చూసినట్లుగా, బటన్ క్లిక్‌పై “నోడ్” ఆబ్జెక్ట్ మాత్రమే జోడించబడుతుంది, “స్ట్రింగ్” కాదు.
లోపం
వెబ్ కన్సోల్‌ని తెరిచి, సమస్యను పరిశీలించడానికి “F12” నొక్కండి:
చూసినట్లుగా, కన్సోల్ “appendChild()” పద్ధతిని ఉపయోగించి స్ట్రింగ్ ఆబ్జెక్ట్‌ను జోడించడంలో లోపాన్ని చూపుతుంది. అందువల్ల, “appendChild()” పద్ధతి స్ట్రింగ్ ఆబ్జెక్ట్‌ను జోడించదని నిర్ధారించబడింది.
తేడా 2: బహుళ నోడ్ ఆబ్జెక్ట్‌లపై j క్వెరీ అనుబంధం() మరియు JavaScript appendChild() పద్ధతులను వర్తింపజేయడం
బహుళ నోడ్ ఆబ్జెక్ట్‌లపై ఈ పద్ధతులను అమలు చేయడం ద్వారా “append()” మరియు “appendChild()” పద్ధతుల మధ్య రెండవ వ్యత్యాసాన్ని విశ్లేషించవచ్చు. దాని ఆచరణాత్మక అమలును చూడటానికి, ఇచ్చిన కోడ్‌లను అనుసరించండి.
HTML కోడ్
HTML కోడ్ ద్వారా వెళ్దాం:
< div id = 'ప్రధాన-డివి' >< div శైలి = 'డిస్‌ప్లే:ఫ్లెక్స్; జస్టిఫై-కంటెంట్:సెంటర్; సమలేఖనం-అంశాలు:మధ్య; వెడల్పు:50px; ఎత్తు:50px; నేపథ్యం:నారింజ; మార్జిన్:10px; వచనం-సమలేఖనం:మధ్యలో;' > ఒకటి < / div >
< div శైలి = 'డిస్‌ప్లే:ఫ్లెక్స్; జస్టిఫై-కంటెంట్:సెంటర్; సమలేఖనం-అంశాలు:మధ్య; వెడల్పు:50px; ఎత్తు:50px; నేపథ్యం:నారింజ; అంచు:10px; వచనం-సమలేఖనం:మధ్యలో;' > రెండు < / div >
< div శైలి = 'డిస్‌ప్లే:ఫ్లెక్స్; జస్టిఫై-కంటెంట్:సెంటర్; సమలేఖనం-అంశాలు:మధ్య; వెడల్పు:50px; ఎత్తు:50px; నేపథ్యం:నారింజ; అంచు:10px; వచనం-సమలేఖనం:మధ్యలో;' > మూడు < / div >
< / div >
ఇక్కడ, పై కోడ్ లైన్‌లు 'మెయిన్-డివ్' ఐడితో కూడిన ప్రధాన '
గమనిక : పైన వ్రాసిన HTML కోడ్ “append()” మరియు “appendChild()” పద్ధతులు రెండింటిలో రెండవ తేడాలో అనుసరించబడుతుంది.
అనుబంధం () పద్ధతి
ఇప్పుడు, కింది స్క్రిప్ట్‌తో కొనసాగండి:
< స్క్రిప్ట్ >స్థిరంగా ప్రధానమైనది = పత్రం. getElementById ( 'ప్రధాన-డివి' ) ;
స్థిరంగా div4 = పత్రం. ఎలిమెంట్ సృష్టించండి ( 'డివి' ) ;
div4. అంతర్గత HTML = 'నాలుగు' ;
div4. శైలి . నేపథ్య రంగు = 'గులాబీ' ;
div4. తరగతి జాబితా . జోడించు ( 'డివి' ) ; స్థిరంగా div5 = పత్రం. ఎలిమెంట్ సృష్టించండి ( 'డివి' ) ;
div5. అంతర్గత HTML = 'ఐదు' ;
div5. శైలి . నేపథ్య రంగు = 'గులాబీ' ;
div5. తరగతి జాబితా . జోడించు ( 'డివి' ) ;
ప్రధానమైనది. జోడించు ( div4 , div5 ) ;
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో:
- “maindiv” వేరియబుల్ “getElementById()” పద్ధతి సహాయంతో దాని id “main-div”ని ఉపయోగించి జోడించిన “div”ని యాక్సెస్ చేస్తుంది.
- తర్వాత, “createElement()” పద్ధతి కొత్త “div” నోడ్ ఆబ్జెక్ట్‌ని సృష్టిస్తుంది, “innerHTML” ప్రాపర్టీని ఉపయోగించి పేర్కొన్న టెక్స్ట్‌ని జోడిస్తుంది మరియు “style.backgroundcolor” ప్రాపర్టీ ద్వారా బ్యాక్‌గ్రౌండ్ కలర్‌ని వర్తింపజేస్తుంది.
- ఆ తర్వాత, “add()” పద్ధతి దానికి “classList” లక్షణాన్ని ఉపయోగించి పేర్కొన్న తరగతి CSS లక్షణాలను జోడిస్తుంది.
- తదుపరి కొత్తగా సృష్టించబడిన “” మూలకం కోసం అదే విధానం అనుసరించబడుతుంది.
- చివరగా, కొత్తగా సృష్టించబడిన నోడ్ ఆబ్జెక్ట్‌లు రెండూ “append()” పద్ధతి సహాయంతో ఒకే సమయంలో జతచేయబడతాయి.
అవుట్‌పుట్
ఇక్కడ, కొత్తగా సృష్టించబడిన బహుళ నోడ్ ఆబ్జెక్ట్‌లు తదనుగుణంగా అదే పేరెంట్ ఎలిమెంట్‌కు జోడించబడతాయి.
“appendChild()” పద్ధతి
తర్వాత, “appendChild()” పద్ధతిని కొనసాగించండి:
< స్క్రిప్ట్ >
ప్రధానమైనది. అనుబంధం చైల్డ్ ( div4 ) ;
ప్రధానమైనది. అనుబంధం చైల్డ్ ( div5 ) ;
స్క్రిప్ట్ >చూసినట్లుగా, “appendChild()” పద్ధతి బహుళ నోడ్ ఆబ్జెక్ట్‌లను ఒక్కొక్కటిగా ఒకే పేరెంట్ ఎలిమెంట్‌కు జోడిస్తుంది.
అవుట్‌పుట్
అవుట్‌పుట్ “అపెండ్()” పద్ధతి వలె ఉంటుంది కానీ నోడ్ ఆబ్జెక్ట్‌లను పేర్కొనడంలో భిన్నంగా ఉంటుంది.
తేడా 3: అప్లైడ్ j క్వెరీ అనుబంధం() మరియు JavaScript appendChild() పద్ధతుల రిటర్న్ విలువ
చివరి వ్యత్యాసం “append()” మరియు “appendChild()” పద్ధతుల యొక్క “రిటర్న్డ్ వాల్యూ”. ఆచరణాత్మకంగా చూద్దాం.
గమనిక : HTML కోడ్ తేడా 2 (మల్టిపుల్ నోడ్ ఆబ్జెక్ట్స్) వలె ఉంటుంది.
“అనుబంధం ()” పద్ధతి
ఇచ్చిన కోడ్ లైన్లను చూడండి:
< స్క్రిప్ట్ >
కన్సోల్. లాగ్ ( ప్రధానమైనది. జోడించు ( div4 ) ) ;
స్క్రిప్ట్ >ఇక్కడ, పేర్కొన్న నోడ్ ఆబ్జెక్ట్‌ను జోడించేటప్పుడు “append()” పద్ధతి యొక్క తిరిగి వచ్చిన విలువను తనిఖీ చేయడానికి “console.log()” పద్ధతి వర్తించబడుతుంది.
అవుట్‌పుట్
వెబ్ కన్సోల్‌ను తెరవడానికి “F12” నొక్కండి:
చూసినట్లుగా, “అనుబంధం()” పద్ధతి యొక్క తిరిగి వచ్చిన విలువ “ నిర్వచించబడలేదు ”.
appendChild() పద్ధతి
ఇప్పుడు, “appendChild()” పద్ధతిని ఉపయోగించి క్రింది కోడ్‌ను పరిగణించండి:
< స్క్రిప్ట్ >
కన్సోల్. లాగ్ ( ప్రధానమైనది. అనుబంధం చైల్డ్ ( div4 ) ) ;
స్క్రిప్ట్ >“append()” పద్ధతి వలె “console.log()” పద్ధతితో “appendChild()” పద్ధతిని పేర్కొనండి.
అవుట్‌పుట్
ఇక్కడ, అవుట్‌పుట్ బదులుగా స్టైలింగ్ లక్షణాలతో సహా అనుబంధిత మూలకం HTMLని అందిస్తుంది.
ముగింపు
j క్వెరీ ' జోడించు ()' మరియు జావాస్క్రిప్ట్ ' అనుబంధం చైల్డ్ ()” పద్ధతులు వాటి ఆధారంగా విభిన్నంగా ఉంటాయి వాక్యనిర్మాణాలు', 'వినియోగం' మరియు 'బహుళ నోడ్ వస్తువులు ”. అంతేకాకుండా, వారి ' విలువలను అందించింది ” కూడా ఒకదానికొకటి భిన్నంగా ఉంటాయి. రెండు పద్ధతులు ఉపయోగకరంగా ఉంటాయి మరియు వాటి వినియోగం వినియోగదారు ఎంపికలపై ఆధారపడి ఉంటుంది. ఈ గైడ్ j క్వెరీ ' మధ్య వ్యత్యాసాన్ని జాబితా చేసింది జోడించు ()' మరియు జావాస్క్రిప్ట్ ' అనుబంధం చైల్డ్ ()” పద్ధతి ఆచరణాత్మకంగా.