ЈаваСцрипт је свестрани програмски језик који омогућава креирање и манипулацију елементима истим као и ХТМЛ (Хипер Тект Маркуп Лангуаге). Следи методе „аппенд()“ и „аппендЦхилд()“ за извођење ове функционалности. Као што им име каже, обе методе додају ХТМЛ елементе као што су Стринг или Ноде објекти. Међутим, они се разликују једни од других у зависности од својих функционалности и других фактора.
Овај водич наглашава кључне разлике између јКуери “ додати ()” и ЈаваСцрипт “ аппендЦхилд ()” методе.
Пре него што пређемо на разлике између јКуери “ додати ()” и ЈаваСцрипт “ аппендЦхилд ()” методе, прво погледајте основе ових метода.
Шта је јКуери аппенд() метод?
јКуери “ додати ()” метод умеће жељене објекте „Чвор” и „Стринг” на крају као последње дете родитељског елемента.
Синтакса
$ ( селектор ) . додати ( садржаја , функција ( индекс , хтмл ) )У горњој синтакси:
- садржаја : Односи се на ХТМЛ елементе, ДОМ елементе или јКуери објекте.
- функција : То је додатни параметар који специфицира кориснички дефинисану ЈаваСцрипт функцију која има параметре „индекс (позиција елемента)“ и „хтмл (хтмл изабраних елемената)“.
Шта је ЈаваСцрипт метод аппендЦхилд()?
Метода „аппендЦхилд()“ само додаје објекат „Чвор“ после последњег потомка надређеног елемента. Прво креира жељени објекат Ноде користећи методу „цреатеЕлемент()“, а затим га додаје.
Синтакса
елемент. аппендЦхилд ( чвор )Ова синтакса захтева само један параметар, тј. чвор ”.
Као што њихова имена говоре, горе описане методе се разликују једна од друге. Овај одељак открива неке факторе по којима се они разликују. Хајде да их погледамо.
Разлике између метода јКуери аппенд() и ЈаваСцрипт аппендЦхилд()
| Услови | јКуери аппенд() | ЈаваСцрипт аппендЦхилд() |
|---|---|---|
| Употреба | Може се користити за додавање родитељског елемента додавањем новог „ Чвор ' и ' Низ ” објеката у исто време. | Може се користити само за додавање родитељског елемента новом „ Чвор ” креиран помоћу „ цреатеЕлемент ()” метод. |
| Вишеструки чворни објекти | „ додати ()” метода може додати више објеката Чвора у свој придружени родитељски елемент истовремено у следећем формату. Формат : „див.аппенд(фирстцхилд, сецондцхилд, 'Линукхинт');' |
„ аппендЦхилд ()” метода добро функционише са више објеката Ноде, али додаје само прво дете у исто време, а затим следеће. Формат : „див.аппендЦхилд(фирстцхилд, сецондцхилд, 'Линукхинт');' |
| Повратна вредност | „ додати ()” метода не враћа додани Ноде објекат јер показује „недефинисану” враћену вредност, тј. Формат : цонсоле.лог(аппендЦхилдВалуе) // недефинисано |
С друге стране, „ аппендЦхилд ()” метода враћа вредност која садржи додани објекат Ноде. Формат : цонсоле.лог(аппендЦхилдВалуе) // <х2><х2>) |
Сада пређите на практичну примену наведених кључних разлика.
Разлика 1: Примена метода јКуери аппенд() и ЈаваСцрипт аппендЦхилд()
Према првој разлици, „ додати ()” метода додаје и чвор и стринг, док метода “аппендЦхилд()” додаје само објекте чвора.
ХТМЛ код
Прво погледајте наведени ХТМЛ код:
< тело >< х2 > јКуери 'аппенд()' Метод < / х2 > //За аппенд() < х2 > јКуери метод 'аппендЦхилд()'. < / х2 > //За аппендЦхилд()
< дугме ид = 'бтн1' онцлицк = 'миФунц1()' > Додати ДОМ стринг < / дугме >
< дугме ид = 'бтн2' онцлицк = 'миФунц2()' > Додај ДОМ чвор < / дугме >
< стр ид = 'за' > Ово је параграф. < / стр >
< ол ид = 'листа' >
< то > Упутство за ЈаваСцрипт 1 < / то >
< то > Упутство за ЈаваСцрипт 2 < / то >
< то > Упутство за ЈаваСцрипт 3 < / то >
< / ол >
< / тело >
У горњим редовима кода:
- Ознака „<х2>” дефинише поднаслов нивоа 2.
- Ознаке “<буттон>” додају два дугмета којима су додељени ИД-ови и догађаје миша “онцлицк”, односно да би позвали одговарајуће ЈаваСцрипт функције када се ови догађаји покрену.
- Ознака “<п>” креира празан пасус са додељеним ИД-ом “пара” да би се приказала додана вредност стринга.
- Ознака “<ол>” додаје уређену листу са ид-ом “лист”, а наведене ставке уз помоћ ознака “<ли>”.
Белешка : Пратите горе написани ХТМЛ код у првој разлици метода „аппенд()“ и „аппендЦхилд()“.
“аппенд()” Метод јКуери код
Прво, преглед јКуери кода методе „аппенд()“:
< глава >< сцрипт срц = '8Ц7А6039Ц1780634269513АФ158Б94Ф13Б702Б45' > скрипта >
< скрипта >
$ ( документ ) . спреман ( функција ( ) {
$ ( '#бтн1' ) . клик ( функција ( ) {
$ ( 'п' ) . додати ( ' <б>Додати стринг.' ) ;
} ) ;
$ ( '#бтн2' ) . клик ( функција ( ) {
$ ( 'ол' ) . додати ( „<ли><б>Додати чвор<б>“ ) ;
} ) ;
} ) ;
скрипта >
глава >
У горњим редовима кода:
- Прво наведите јКуери “ ЦДН “пута са њеног званичног сајта” Е073598Ц33691Ф750Ф141Е2А366Ф0ЕЦ65Ц1ФА276 ” уз помоћ „ срц ” атрибут.
- Затим додајте мали одељак скрипте који прво користи „ спреман ()“ метод за позивање наведеног „ функција ()” када се ХТМЛ документ учита.
- Након тога, „ клик ()” метода извршава функцију која је повезана са дугметом чији је ИД „ бтн1 ” након клика на дугме.
- У дефиницији функције, „ додати ()” метода се користи за додавање циљаног елемента пасуса са наведеним низом.
- Исти процес се ради за додато „ наређена листа ” тј., објекат чвора да га дода датој ставци.
Излаз
Овде је потврђено да су и „Стринг“ и „Чвор“ објекти додани уз помоћ методе „аппенд()“.
“аппендЦхилд()” Метод ЈаваСцрипт код
Сада, практично погледајте ЈаваСцрипт метод „аппендЦхилд()“:
< скрипта >функција миФунц1 ( ) {
за. аппендЦхилд ( „<п>Додати стринг“ ) //Додавање ДОМ стринга
} функција миФунц2 ( ) {
конст елемент = документ. цреатеЕлемент ( 'то' ) ;
конст чвор = документ. цреатеТектНоде ( 'Приложена ставка' ) ;
елемент. аппендЦхилд ( чвор ) ; //Додавање ДОМ чвора
конст елемент = документ. гетЕлементБиИд ( 'листа' ) ;
елемент. аппендЦхилд ( елемент ) ;
}
скрипта >
У горњем исечку кода:
- Дефинишите назив функције ' миФунц1 ()“ који користи метод „аппендЦхилд()“ за додавање додатог пасуса са датим низом.
- Затим, у „ миФунц2 ()”, метода „цреатеЕлемент()” креира нови елемент листе, а затим му додаје текст помоћу методе „цреатеТектНоде()”.
- Након тога, додајте креирани чвор листе са његовим текстом помоћу методе „аппендЦхилд()“.
- На крају, додајте новокреирани чвор листе на уређену листу којој је приступљено чији је ИД „лист“ уз помоћ методе „аппендЦхилд()“.
Излаз
Као што се види, само објекат „Чвор“ се додаје након клика на дугме, а не „Стринг“.
Грешка
Притисните „Ф12“ да отворите веб конзолу и проверите проблем:
Као што се види, конзола показује грешку при додавању Стринг објекта помоћу методе „аппендЦхилд()“. Стога је потврђено да метода „аппендЦхилд()“ не додаје Стринг објекат.
Разлика 2: Примена метода јКуери аппенд() и ЈаваСцрипт аппендЦхилд() на више објеката чвора
Друга разлика између метода „аппенд()“ и „аппендЦхилд()“ може се анализирати извођењем ових метода на више објеката чвора. Да бисте видели његову практичну примену, пратите дате кодове.
ХТМЛ код
Хајде да прођемо кроз ХТМЛ код:
< див ид = 'главни див' >< див стил = 'дисплаи:флек; јустифи-цонтент:центер; алигн-итемс:центер; видтх:50пк; хеигхт:50пк; бацкгроунд:орангеред; маргин:10пк; тект-алигн:центер;' > Један < / див >
< див стил = 'дисплаи:флек; јустифи-цонтент:центер; алигн-итемс:центер; видтх:50пк; хеигхт:50пк; бацкгроунд:орангеред; маргин:10пк; тект-алигн:центер;' > Два < / див >
< див стил = 'дисплаи:флек; јустифи-цонтент:центер; алигн-итемс:центер; видтх:50пк; хеигхт:50пк; бацкгроунд:орангеред; маргин:10пк; тект-алигн:центер;' > Три < / див >
< / див >
Овде, горњи редови кода садрже главни елемент „<див>” са ИД-ом „маин-див”, а затим три елемента „<див>” унутар њега прилагођена следећим стилским атрибутима.
Белешка : Горе написани ХТМЛ код је праћен у другој разлици метода „аппенд()“ и „аппендЦхилд()“.
аппенд() метода
Сада наставите са следећом скриптом:
< скрипта >конст маиндив = документ. гетЕлементБиИд ( 'главни див' ) ;
конст див4 = документ. цреатеЕлемент ( 'див' ) ;
див4. иннерХТМЛ = 'четири' ;
див4. стил . боја позадине = 'ружичаста' ;
див4. цлассЛист . додати ( 'див' ) ; конст див5 = документ. цреатеЕлемент ( 'див' ) ;
див5. иннерХТМЛ = 'пет' ;
див5. стил . боја позадине = 'ружичаста' ;
див5. цлассЛист . додати ( 'див' ) ;
маиндив. додати ( див4 , див5 ) ;
скрипта >
У горњем исечку кода:
- Променљива „маиндив“ приступа додатом „див“ користећи свој ИД „маин-див“ уз помоћ методе „гетЕлементБиИд()“.
- Затим, метод „цреатеЕлемент()“ креира нови „див“ Ноде објекат, додаје наведени текст користећи својство „иннерХТМЛ“ и примењује боју позадине преко својства „стиле.бацкгроундцолор“.
- Након тога, метода „адд()“ додаје му наведена својства ЦСС класе користећи својство „цлассЛист“.
- Иста процедура се прати за следећи новокреирани „<див>” елемент.
- На крају, оба новостворена објекта Ноде се додају у исто време уз помоћ методе „аппенд()“.
Излаз
Овде се новокреирани вишеструки објекти чвора додају истом родитељском елементу у складу са тим.
Метода „аппендЦхилд()“.
Затим наставите са методом „аппендЦхилд()“:
< скрипта >маиндив. аппендЦхилд ( див4 ) ;
маиндив. аппендЦхилд ( див5 ) ;
скрипта >
Као што се види, метода „аппендЦхилд()“ додаје више објеката Чвора један по један истом родитељском елементу.
Излаз
Излаз је исти као метод “аппенд()”, али се разликује у специфицирању објеката чвора.
Разлика 3: Повратна вредност примењених метода јКуери аппенд() и ЈаваСцрипт аппендЦхилд()
Последња разлика је „враћена вредност“ метода „аппенд()“ и „аппендЦхилд()“. Да видимо то практично.
Белешка : ХТМЛ код је исти као Дифференце 2 (вишеструки чворни објекти).
Метода „аппенд()“.
Погледајте дате линије кода:
< скрипта >конзола. Пријава ( маиндив. додати ( див4 ) ) ;
скрипта >
Овде се примењује метод „цонсоле.лог()“ да би се проверила враћена вредност методе „аппенд()“ док се додаје наведени објекат Ноде.
Излаз
Притисните „Ф12“ да отворите веб конзолу:
Као што се види, враћена вредност методе „аппенд()“ је „ недефинисан ”.
аппендЦхилд() Метод
Сада размислите о следећем коду који користи метод „аппендЦхилд()“:
< скрипта >конзола. Пријава ( маиндив. аппендЦхилд ( див4 ) ) ;
скрипта >
Наведите методу „аппендЦхилд()“ са методом „цонсоле.лог()“ исто као и методом „аппенд()“.
Излаз
Овде излаз враћа додани ХТМЛ елемент укључујући својства стила.
Закључак
јКуери “ додати ()“ и ЈаваСцрипт „ аппендЦхилд ()“ методе се разликују на основу њиховог „ синтаксе“, „употреба“ и „више објеката чворова ”. Штавише, њихов „ враћене вредности ” се такође разликују једни од других. Обе методе су корисне и њихова употреба зависи од избора корисника. Овај водич наводи разлику између јКуери “ додати ()“ и ЈаваСцрипт „ аппендЦхилд ()” метод практично.