ஜாவாஸ்கிரிப்ட் என்பது ஒரு பல்துறை நிரலாக்க மொழியாகும், இது HTML (ஹைப்பர் டெக்ஸ்ட் மார்க்அப் லாங்குவேஜ்) போன்ற கூறுகளை உருவாக்கவும் கையாளவும் அனுமதிக்கிறது. இந்தச் செயல்பாட்டைச் செய்ய “append()” மற்றும் “appendChild()” முறைகளைப் பின்பற்றுகிறது. அவற்றின் பெயர் குறிப்பிடுவது போல, இரண்டு முறைகளும் சரம் அல்லது முனை பொருள்கள் போன்ற HTML கூறுகளைச் சேர்க்கின்றன. இருப்பினும், அவை அவற்றின் செயல்பாடுகள் மற்றும் பிற காரணிகளைப் பொறுத்து ஒருவருக்கொருவர் வேறுபடுகின்றன.
இந்த வழிகாட்டி jQuery 'க்கு இடையிலான முக்கிய வேறுபாடுகளை அடிக்கோடிட்டுக் காட்டுகிறது இணைக்கவும் ()' மற்றும் ஜாவாஸ்கிரிப்ட் ' appendChild ()” முறைகள்.
jQuery 'க்கு இடையிலான வேறுபாடுகளுக்குச் செல்வதற்கு முன் இணைக்கவும் ()' மற்றும் ஜாவாஸ்கிரிப்ட் ' appendChild ()” முறைகள், முதலில் இந்த முறைகளின் அடிப்படைகளைப் பாருங்கள்.
jQuery append() Method என்றால் என்ன?
jQuery' இணைக்கவும் ()' முறையானது விரும்பிய 'நோட்' மற்றும் 'ஸ்ட்ரிங்' பொருட்களை இறுதியில் பெற்றோர் உறுப்பின் கடைசி குழந்தையாகச் செருகும்.
தொடரியல்
$ ( தேர்வாளர் ) . இணைக்கவும் ( உள்ளடக்கம் , செயல்பாடு ( குறியீட்டு , html ) )மேலே உள்ள தொடரியல்:
- உள்ளடக்கம் : இது HTML உறுப்புகள், DOM கூறுகள் அல்லது jQuery பொருள்களைக் குறிக்கிறது.
- செயல்பாடு : இது 'இண்டெக்ஸ் (உறுப்பு நிலை)' மற்றும் 'html (தேர்ந்தெடுக்கப்பட்ட உறுப்புகளின் html)' அளவுருக்கள் கொண்ட பயனர் வரையறுக்கப்பட்ட JavaScript செயல்பாட்டைக் குறிப்பிடும் கூடுதல் அளவுருவாகும்.
JavaScript appendChild() முறை என்றால் என்ன?
“appendChild()” முறையானது, பெற்றோர் உறுப்பின் கடைசி குழந்தைக்குப் பிறகு “நோட்” பொருளை மட்டுமே சேர்க்கிறது. இது முதலில் 'createElement()' முறையைப் பயன்படுத்தி விரும்பிய முனை பொருளை உருவாக்குகிறது, பின்னர் அதை இணைக்கிறது.
தொடரியல்
உறுப்பு. appendChild ( முனை )இந்த தொடரியல் ஒரே ஒரு அளவுரு தேவை, அதாவது, ' முனை ”.
அவர்களின் பெயர்கள் குறிப்பிடுவது போல, மேலே விவாதிக்கப்பட்ட முறைகள் ஒன்றுக்கொன்று வேறுபட்டவை. இந்த பகுதி அவை வேறுபட்ட சில காரணிகளைக் கணக்கிடுகிறது. அவற்றைப் பற்றிப் பார்ப்போம்.
jQuery append() மற்றும் JavaScript appendChild() முறைக்கு இடையே உள்ள வேறுபாடுகள்
| விதிமுறை | jQuery append() | ஜாவாஸ்கிரிப்ட் appendChild() |
|---|---|---|
| பயன்பாடு | புதிய '' ஐச் சேர்ப்பதன் மூலம் மூல உறுப்பைச் சேர்க்க இதைப் பயன்படுத்தலாம் முனை 'மற்றும்' லேசான கயிறு ” ஒரே நேரத்தில் பொருள்கள். | புதிய ' மூலம் மூல உறுப்பைச் சேர்க்க மட்டுமே இது பயன்படுத்தப்படும் முனை '' பயன்படுத்தி உருவாக்கப்பட்டது உருவாக்க உறுப்பு ()” முறை. |
| பல முனை பொருள்கள் | ' இணைக்கவும் ()” முறையானது பின்வரும் வடிவத்தில் ஒரே நேரத்தில் அதனுடன் தொடர்புடைய பெற்றோர் உறுப்பில் பல முனை பொருள்களைச் சேர்க்கலாம். வடிவம் : 'div.append(முதல் குழந்தை, இரண்டாவது குழந்தை, 'Linuxhint');' |
' appendChild ()” முறை பல முனை பொருள்களுடன் நன்றாக வேலை செய்கிறது, ஆனால் இது ஒரு நேரத்தில் முதல் குழந்தைக்கும் அடுத்த குழந்தைக்கும் மட்டுமே சேர்க்கிறது. வடிவம் : 'div.appendChild(முதல் குழந்தை, இரண்டாவது குழந்தை, 'Linuxhint');' |
| வருவாய் மதிப்பு | ' இணைக்கவும் ()” முறையானது இணைக்கப்பட்ட நோட் பொருளை வழங்காது, ஏனெனில் அது 'வரையறுக்கப்படாத' திரும்பிய மதிப்பைக் காட்டுகிறது, அதாவது. வடிவம் : console.log(appendChildValue) // வரையறுக்கப்படவில்லை |
மறுபுறம், ' appendChild ()” முறையானது இணைக்கப்பட்ட முனை பொருளைக் கொண்ட மதிப்பை வழங்குகிறது. வடிவம் : console.log(appendChildValue) //
|
இப்போது பட்டியலிடப்பட்ட முக்கிய வேறுபாடுகளின் நடைமுறைச் செயலாக்கத்திற்குச் செல்லவும்.
வேறுபாடு 1: jQuery append() மற்றும் JavaScript appendChild() முறைகளைப் பயன்படுத்துதல்
முதல் வேறுபாட்டின் படி, ' இணைக்கவும் ()” முறை Node மற்றும் String இரண்டையும் சேர்க்கும் அதே வேளையில் “appendChild()” முறையானது Node ஆப்ஜெக்ட்களை மட்டுமே சேர்க்கும்.
HTML குறியீடு
முதலில், கூறப்பட்ட HTML குறியீட்டைப் பாருங்கள்:
< உடல் >< h2 > jQuery 'append()' முறை < / h2 > //இணைப்பதற்காக() < h2 > jQuery 'appendChild()' முறை < / h2 > //சேர்க்கை குழந்தைக்காக()
< பொத்தானை ஐடி = 'btn1' கிளிக் செய்யவும் = 'myFunc1()' > DOM சரத்தைச் சேர்க்கவும் < / பொத்தானை >
< பொத்தானை ஐடி = 'btn2' கிளிக் செய்யவும் = 'myFunc2()' > DOM முனையைச் சேர்க்கவும் < / பொத்தானை >
< ப ஐடி = 'அதற்காக' > இது ஒரு பத்தி. < / ப >
< ol ஐடி = 'பட்டியல்' >
< அந்த > ஜாவாஸ்கிரிப்ட் டுடோரியல் 1 < / அந்த >
< அந்த > ஜாவாஸ்கிரிப்ட் டுடோரியல் 2 < / அந்த >
< அந்த > ஜாவாஸ்கிரிப்ட் டுடோரியல் 3 < / அந்த >
< / ol >
< / உடல் >
மேலே உள்ள குறியீடு வரிகளில்:
- '
' குறிச்சொல் நிலை 2 இன் துணைத்தலைப்பை வரையறுக்கிறது.
- '
- '
' குறிச்சொல் இணைக்கப்பட்ட சர மதிப்பைக் காட்ட ஒதுக்கப்பட்ட ஐடி 'பாரா' உடன் வெற்றுப் பத்தியை உருவாக்குகிறது.
- '
- ' குறிச்சொல் ஒரு ஐடி 'பட்டியல்' உடன் வரிசைப்படுத்தப்பட்ட பட்டியலையும், '
- ' குறிச்சொற்களின் உதவியுடன் பட்டியலிடப்பட்ட உருப்படிகளையும் சேர்க்கிறது.
குறிப்பு : 'append()' மற்றும் 'appendChild()' முறைகள் இரண்டின் முதல் வேறுபாட்டில் மேலே எழுதப்பட்ட HTML குறியீட்டைப் பின்பற்றவும்.
'append()' முறை jQuery குறியீடு
முதலில், “append()” முறை jQuery குறியீட்டின் கண்ணோட்டம்:
< தலை >< ஸ்கிரிப்ட் எஸ்ஆர்சி = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > கையால் எழுதப்பட்ட தாள் >
< கையால் எழுதப்பட்ட தாள் >
$ ( ஆவணம் ) . தயார் ( செயல்பாடு ( ) {
$ ( '#btn1' ) . கிளிக் செய்யவும் ( செயல்பாடு ( ) {
$ ( 'p' ) . இணைக்கவும் ( ' இணைக்கப்பட்ட சரம் .' ) ;
} ) ;
$ ( '#btn2' ) . கிளிக் செய்யவும் ( செயல்பாடு ( ) {
$ ( 'ஓல்' ) . இணைக்கவும் ( '
} ) ;
} ) ;
கையால் எழுதப்பட்ட தாள் >
தலை >
மேலே உள்ள குறியீடு வரிகளில்:
- முதலில், jQuery 'ஐக் குறிப்பிடவும். CDN 'அதன் அதிகாரப்பூர்வ வலைத்தளத்திலிருந்து பாதை' https://jquery.com/ '' உதவியுடன் src ” பண்பு.
- அடுத்து, முதலில் பயன்படுத்தப்படும் ஒரு சிறிய ஸ்கிரிப்ட் பகுதியைச் சேர்க்கவும் தயார் ()' கூறப்பட்டதை அழைக்கும் முறை ' செயல்பாடு ()” HTML ஆவணம் ஏற்றப்படும் போது.
- அதன் பிறகு, ' கிளிக் செய்யவும் ()” முறையானது ஐடி என்ற பொத்தானுடன் இணைக்கப்பட்ட செயல்பாட்டைச் செயல்படுத்துகிறது. btn1 ” என்ற பொத்தானைக் கிளிக் செய்யும்போது.
- செயல்பாட்டு வரையறையில், ' இணைக்கவும் ()” முறை குறிப்பிடப்பட்ட சரத்துடன் இலக்கு பத்தி உறுப்பைச் சேர்க்கப் பயன்படுகிறது.
- 'சேர்க்கப்பட்டதற்கும் அதே செயல்முறை செய்யப்படுகிறது. வரிசைப்படுத்தப்பட்ட பட்டியல் ” அதாவது, கொடுக்கப்பட்ட உருப்படியுடன் அதைச் சேர்க்க முனை பொருள்.
வெளியீடு
இங்கே, 'சரம்' மற்றும் 'நோட்' ஆகிய இரண்டும் 'append()' முறையின் உதவியுடன் இணைக்கப்பட்டுள்ளன என்பது உறுதிப்படுத்தப்பட்டுள்ளது.
“appendChild()” முறை ஜாவாஸ்கிரிப்ட் குறியீடு
இப்போது, JavaScript “appendChild()” முறையை நடைமுறையில் பாருங்கள்:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு myFunc1 ( ) {
க்கான. appendChild ( '
இணைக்கப்பட்ட சரம்
' ) //DOM சரத்தை இணைக்கவும்} செயல்பாடு myFunc2 ( ) {
நிலையான உறுப்பு = ஆவணம். உருவாக்க உறுப்பு ( 'அந்த' ) ;
நிலையான முனை = ஆவணம். CreateTextNode ( 'இணைக்கப்பட்ட உருப்படி' ) ;
உறுப்பு. appendChild ( முனை ) ; //DOM முனையைச் சேர்க்கவும்
நிலையான உறுப்பு = ஆவணம். getElementById ( 'பட்டியல்' ) ;
உறுப்பு. appendChild ( உறுப்பு ) ;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- ஒரு செயல்பாட்டு பெயரை வரையறுக்கவும் ' myFunc1 கொடுக்கப்பட்ட சரத்துடன் சேர்க்கப்பட்ட பத்தியைச் சேர்க்க, 'appendChild()' முறையைப் பயன்படுத்தும் ()'.
- அடுத்து, ' myFunc2 ()” செயல்பாடு, “createElement()” முறையானது புதிய பட்டியல் உறுப்பை உருவாக்கி, “createTextNode()” முறையைப் பயன்படுத்தி அதில் சில உரைகளைச் சேர்க்கிறது.
- அதன் பிறகு, 'appendChild()' முறையைப் பயன்படுத்தி உருவாக்கப்பட்ட பட்டியல் முனையை அதன் உரையுடன் இணைக்கவும்.
- கடைசியாக, 'appendChild()' முறையின் உதவியுடன், புதிதாக உருவாக்கப்பட்ட பட்டியல் முனையை அணுகப்பட்ட ஆர்டர் பட்டியலில் இணைக்கவும்.
வெளியீடு
பார்த்தபடி, பொத்தான் கிளிக்கில் 'நோட்' பொருள் மட்டுமே சேர்க்கப்படும், 'ஸ்ட்ரிங்' அல்ல.
பிழை
வலை கன்சோலைத் திறந்து சிக்கலைச் சரிபார்க்க “F12” ஐ அழுத்தவும்:
பார்த்தபடி, “appendChild()” முறையைப் பயன்படுத்தி சரம் பொருளைச் சேர்ப்பதில் கன்சோல் பிழையைக் காட்டுகிறது. எனவே, “appendChild()” முறையானது String ஆப்ஜெக்ட்டைச் சேர்க்கவில்லை என்பது உறுதிசெய்யப்பட்டது.
வேறுபாடு 2: jQuery append() மற்றும் JavaScript appendChild() முறைகளை பல முனை பொருள்களில் பயன்படுத்துதல்
'append()' மற்றும் 'appendChild()' முறைகளுக்கு இடையே உள்ள இரண்டாவது வேறுபாட்டை பல முனை பொருள்களில் இந்த முறைகளை செயல்படுத்துவதன் மூலம் பகுப்பாய்வு செய்யலாம். அதன் நடைமுறைச் செயலாக்கத்தைப் பார்க்க, கொடுக்கப்பட்ட குறியீடுகளைப் பின்பற்றவும்.
HTML குறியீடு
HTML குறியீட்டின் வழியாக செல்லலாம்:
< div ஐடி = 'முக்கிய பகுதி' >< div பாணி = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > ஒன்று < / div >
< div பாணி = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > இரண்டு < / div >
< div பாணி = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > மூன்று < / div >
< / div >
இங்கே, மேலே உள்ள குறியீட்டு வரிகள் ஐடி '
குறிப்பு : மேலே எழுதப்பட்ட HTML குறியீடு “append()” மற்றும் “appendChild()” முறைகளின் இரண்டாவது வேறுபாட்டில் பின்பற்றப்படுகிறது.
append() முறை
இப்போது, பின்வரும் ஸ்கிரிப்டைத் தொடரவும்:
< கையால் எழுதப்பட்ட தாள் >நிலையான முக்கிய = ஆவணம். getElementById ( 'முக்கிய பகுதி' ) ;
நிலையான div4 = ஆவணம். உருவாக்க உறுப்பு ( 'டிவி' ) ;
div4. உள் HTML = 'நான்கு' ;
div4. பாணி . பின்னணி நிறம் = 'இளஞ்சிவப்பு' ;
div4. வகுப்பு பட்டியல் . கூட்டு ( 'டிவி' ) ; நிலையான div5 = ஆவணம். உருவாக்க உறுப்பு ( 'டிவி' ) ;
div5. உள் HTML = 'ஐந்து' ;
div5. பாணி . பின்னணி நிறம் = 'இளஞ்சிவப்பு' ;
div5. வகுப்பு பட்டியல் . கூட்டு ( 'டிவி' ) ;
முக்கிய இணைக்கவும் ( div4 , div5 ) ;
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- 'maindiv' மாறி, 'getElementById()' முறையின் உதவியுடன் அதன் ஐடி 'main-div' ஐப் பயன்படுத்தி சேர்க்கப்பட்ட 'div' ஐ அணுகுகிறது.
- அடுத்து, “createElement()” முறையானது ஒரு புதிய “div” Node ஆப்ஜெக்ட்டை உருவாக்கி, “innerHTML” பண்பைப் பயன்படுத்தி குறிப்பிட்ட உரையைச் சேர்க்கிறது, மேலும் “style.backgroundcolor” பண்பு வழியாக பின்னணி வண்ணத்தைப் பயன்படுத்துகிறது.
- அதன் பிறகு, 'சேர் ()' முறையானது 'கிளாஸ்லிஸ்ட்' சொத்தைப் பயன்படுத்தி குறிப்பிட்ட வகுப்பு CSS பண்புகளைச் சேர்க்கிறது.
- அடுத்து புதிதாக உருவாக்கப்பட்ட “” உறுப்புக்கும் இதே நடைமுறை பின்பற்றப்படுகிறது.
- இறுதியாக, புதிதாக உருவாக்கப்பட்ட இரண்டு முனை பொருள்களும் ஒரே நேரத்தில் “append()” முறையின் உதவியுடன் இணைக்கப்படுகின்றன.
வெளியீடு
இங்கே, புதிதாக உருவாக்கப்பட்ட பல முனைப் பொருள்கள் அதற்கேற்ப அதே பெற்றோர் உறுப்புடன் இணைக்கப்படுகின்றன.
“appendChild()” முறை
அடுத்து, “appendChild()” முறையைத் தொடரவும்:
< கையால் எழுதப்பட்ட தாள் >
முக்கிய appendChild ( div4 ) ;
முக்கிய appendChild ( div5 ) ;
கையால் எழுதப்பட்ட தாள் >பார்த்தது போல், “appendChild()” முறையானது பல முனை பொருள்களை ஒன்றன் பின் ஒன்றாக ஒரே பெற்றோர் உறுப்புடன் சேர்க்கிறது.
வெளியீடு
வெளியீடு 'append()' முறையைப் போலவே உள்ளது, ஆனால் முனை பொருள்களைக் குறிப்பிடுவதில் வேறுபட்டது.
வேறுபாடு 3: பயன்படுத்தப்பட்ட jQuery append() மற்றும் JavaScript appendChild() முறைகளின் மதிப்பு திரும்பவும்
கடைசி வித்தியாசம் 'சேர்க்கை()' மற்றும் 'appendChild()' முறைகளின் 'திரும்பிய மதிப்பு' ஆகும். அதை நடைமுறையில் பார்க்கலாம்.
குறிப்பு : HTML குறியீடு வேறுபாடு 2 (பல முனை பொருள்கள்) போலவே உள்ளது.
“சேர்க்கவும் ()” முறை
கொடுக்கப்பட்ட குறியீட்டு வரிகளைப் பாருங்கள்:
< கையால் எழுதப்பட்ட தாள் >
பணியகம். பதிவு ( முக்கிய இணைக்கவும் ( div4 ) ) ;
கையால் எழுதப்பட்ட தாள் >இங்கே, குறிப்பிட்ட முனை பொருளைச் சேர்க்கும் போது “append()” முறையின் திரும்பிய மதிப்பைச் சரிபார்க்க “console.log()” முறை பயன்படுத்தப்படுகிறது.
வெளியீடு
வலை கன்சோலைத் திறக்க 'F12' ஐ அழுத்தவும்:
பார்த்தபடி, “append()” முறையின் திரும்பிய மதிப்பு “ வரையறுக்கப்படாத ”.
appendChild() முறை
இப்போது, “appendChild()” முறையைப் பயன்படுத்தி பின்வரும் குறியீட்டைக் கவனியுங்கள்:
< கையால் எழுதப்பட்ட தாள் >
பணியகம். பதிவு ( முக்கிய appendChild ( div4 ) ) ;
கையால் எழுதப்பட்ட தாள் >“append()” முறையைப் போலவே “console.log()” முறையைக் கொண்டு “appendChild()” முறையைக் குறிப்பிடவும்.
வெளியீடு
இங்கே, வெளியீடு அதற்கு பதிலாக ஸ்டைலிங் பண்புகள் உட்பட இணைக்கப்பட்ட உறுப்பு HTML ஐ வழங்குகிறது.
முடிவுரை
jQuery' இணைக்கவும் ()' மற்றும் ஜாவாஸ்கிரிப்ட் ' appendChild ()” முறைகள் அவற்றின் அடிப்படையில் வேறுபட்டவை தொடரியல்', 'பயன்பாடு' மற்றும் 'பல முனை பொருள்கள் ”. மேலும், அவர்களின் ' திரும்பிய மதிப்புகள் ” என்பதும் ஒன்றுக்கொன்று வேறுபட்டவை. இரண்டு முறைகளும் பயனுள்ளவை மற்றும் அவற்றின் பயன்பாடு பயனரின் விருப்பங்களைப் பொறுத்தது. இந்த வழிகாட்டி jQuery 'க்கு இடையிலான வேறுபாட்டை பட்டியலிட்டுள்ளது. இணைக்கவும் ()' மற்றும் ஜாவாஸ்கிரிப்ட் ' appendChild ()” முறை நடைமுறையில்.