ఈ ట్యుటోరియల్ జావాస్క్రిప్ట్‌ని ఉపయోగించి డైనమిక్‌గా HTML కోడ్‌ను వ్రాయడానికి పద్ధతులను వివరిస్తుంది.
జావాస్క్రిప్ట్‌ని ఉపయోగించి డైనమిక్‌గా HTML కోడ్‌ని ఎలా వ్రాయాలి?
జావాస్క్రిప్ట్‌ని ఉపయోగించి HTML కోడ్‌ని వ్రాయడానికి, ఈ క్రింది పద్ధతులను ఉపయోగించండి:
విధానం 1: document.createElement() పద్ధతిని ఉపయోగించి డైనమిక్‌గా HTML కోడ్‌ని వ్రాయండి
జావాస్క్రిప్ట్ ' document.createElement() 'తో పద్ధతి' టెక్స్ట్ కంటెంట్ ” ఆస్తి జావాస్క్రిప్ట్‌లో డైనమిక్‌గా HTML కోడ్‌ని వ్రాయడానికి ఉపయోగించబడుతుంది. createElement() పద్ధతిని ఉపయోగించి, మీరు ఒక నిర్దిష్ట HTML మూలకాన్ని సృష్టించవచ్చు మరియు టెక్స్ట్ కంటెంట్‌ని సెట్ చేయడానికి textContent ఆస్తి ఉపయోగించబడుతుంది.
వాక్యనిర్మాణం
JavaScriptలో HTML మూలకాన్ని సృష్టించడానికి ఇచ్చిన సింటాక్స్‌ని ఉపయోగించండి:
పత్రం. ఎలిమెంట్ సృష్టించండి ( 'tagName' )
ఉదాహరణ
ఇక్కడ, ముందుగా, ''లో పాస్ చేసిన HTML
ట్యాగ్‌ని ఉపయోగించి జావాస్క్రిప్ట్ ఫైల్‌లో పేరాగ్రాఫ్‌ను సృష్టిస్తాము. క్రియేట్ ఎలిమెంట్() 'పద్ధతి:
స్థిరంగా వచనం = పత్రం. ఎలిమెంట్ సృష్టించండి ( 'p' ) ;పేరాలో వచనాన్ని సెట్ చేయడానికి textContent లక్షణాన్ని ఉపయోగించండి:
వచనం. టెక్స్ట్ కంటెంట్ = 'Linuxhint కు స్వాగతం' ;
చివరగా, వెబ్‌పేజీలో వచనాన్ని “ని ఉపయోగించి ప్రింట్ చేయండి document.write() 'పద్ధతి:
పత్రం. వ్రాయడానికి ( వచనం. టెక్స్ట్ కంటెంట్ ) ;ఇక్కడ, మేము జావాస్క్రిప్ట్‌ని ఉపయోగించి వెబ్ పేజీలో టెక్స్ట్‌ను విజయవంతంగా వ్రాస్తాము అని మీరు అవుట్‌పుట్‌లో చూడవచ్చు:
విధానం 2: అంతర్గత HTML ప్రాపర్టీని ఉపయోగించి డైనమిక్‌గా HTML కోడ్‌ను వ్రాయండి
HTML కోడ్‌ను డైనమిక్‌గా వ్రాయడానికి, జావాస్క్రిప్ట్‌ని ఉపయోగించండి ' అంతర్గత HTML ”ఆస్తి. HTML మూలకం యొక్క కంటెంట్‌ను మార్చడానికి ఇది సరళమైన విధానం. ఇది అన్ని బ్రౌజర్‌లకు మద్దతు ఇస్తుంది.
వాక్యనిర్మాణం
అంతర్గత HTML ప్రాపర్టీని ఉపయోగించడానికి ఇచ్చిన సింటాక్స్‌ని అనుసరించండి:
అంతర్గత HTML = 'వచనం'ఉదాహరణ
HTML ఫైల్‌లో, ముందుగా, నిర్వచించిన ఫంక్షన్‌ని పిలిచే బటన్‌ను సృష్టించండి “ శీర్షిక() ” క్లిక్ ఈవెంట్‌లో జావాస్క్రిప్ట్‌లో:
< బటన్ క్లిక్ చేయండి = 'శీర్షిక()' > ఇక్కడ నొక్కండి బటన్ >జావాస్క్రిప్ట్ నుండి టెక్స్ట్ చూపబడే
ట్యాగ్‌ని ఉపయోగించి పేరాగ్రాఫ్‌ను సృష్టించండి మరియు దానికి ఒక ఐడిని కేటాయించండి:
< p id = 'శీర్షిక' > p >ఒక ఫంక్షన్ నిర్వచించండి ' శీర్షిక() ” జావాస్క్రిప్ట్ ఫైల్‌లో. దీని సహాయంతో HTML మూలకం దాని కేటాయించిన idని ఉపయోగించి సూచనను పొందండి getElementById() 'పద్ధతి మరియు వర్తించు' అంతర్గత HTML 'దానిపై ఆస్తి:
ఫంక్షన్ శీర్షిక ( ) {పత్రం. getElementById ( 'శీర్షిక' ) . అంతర్గత HTML = '
Linuxhint కు స్వాగతం
' ;}
అవుట్‌పుట్
మేము జావాస్క్రిప్ట్‌ని ఉపయోగించి డైనమిక్‌గా HTML కోడ్‌ని వ్రాయడానికి సంబంధించిన అన్ని ముఖ్యమైన సమాచారాన్ని సంకలనం చేసాము.
ముగింపు
జావాస్క్రిప్ట్‌లో డైనమిక్‌గా HTML కోడ్‌ని వ్రాయడానికి, “ని ఉపయోగించండి document.createElement() 'తో పద్ధతి' టెక్స్ట్ కంటెంట్ 'ఆస్తి లేదా' అంతర్గత HTML ”ఆస్తి. మొదటి పద్ధతిలో, మీకు ఏ HTML కోడ్ అవసరం లేదు, అయితే అంతర్గత HTML ప్రాపర్టీలో, మీరు HTML మూలకాన్ని యాక్సెస్ చేసి దానిపై ఆపరేషన్ చేయాలి. ఈ ట్యుటోరియల్‌లో, జావాస్క్రిప్ట్‌ని డైనమిక్‌గా ఉపయోగించి HTML కోడ్‌ను వ్రాయడానికి మేము పద్ధతులను వివరించాము.