У овом чланку ћемо разговарати о томе како да креирате ХТМЛ елемент путем ЈаваСцрипт-а. Овде ћемо видети неке примере за уметање креираног елемента у документ.
Креирање елемената помоћу ХТМЛ-а није једини начин за креирање елемената. Међутим, ради једноставности, много пута креирамо елементе директно у ХТМЛ документу, али користећи ЈаваСцрипт, такође је могуће креирати елементе.
Тхе доцумент.цреатеЕлемент() се користи за динамичко креирање чвора ХТМЛ елемента са наведеним именом путем ЈаваСцрипт-а. Овај метод узима име елемента као параметар и креира тај чвор елемента.
Након креирања елемента, можемо користити метод аппендЦхилд() или метод инсертБефоре() да убацимо креирани елемент у документ.
Можемо користити ремовеЦхилд() метод за уклањање чвора и такође може да користи реплацеЦхилд() метод за замену чвора.
Синтакса
document.createElement(nodename);
Овај метод прихвата једну вредност параметра која је наведена на следећи начин:
сачувај иоутубе видео влц
име чвора: То је обавезан параметар. Овај параметар је стринг типа. Он одређује име елемента, који морамо да креирамо. Име елемента наведено у параметру ће креирати елемент; у супротном, ако име наведеног елемента није препознато, биће креиран непознати ХТМЛ елемент.
Тхе доцумент.цреатеЕлемент() вратиће новокреирани елемент.
Сада, хајде да видимо неке примере коришћења доцумент.цреатеЕлемент() методом. Овде ћемо показати два примера. У првом примеру користићемо аппендЦхилд() метод за уметање елемента у документ, ау другом примеру ћемо користити инсертБефоре() метод за уметање елемента који је креирао доцумент.цреатеЕлемент() методом.
Пример1
У овом примеру користимо доцумент.цреатеЕлемент() метод за креирање новог елемента дугмета. Креирани елемент ћемо уметнути помоћу аппендЦхилд() методом. Ево, постоји а забавно() метод који ће креирати нови елемент дугмета користећи цреатеЕлемент() методом. Текст постављамо помоћу иннерХТМЛ који ће бити приказан на врху дугмета.
Погледајмо пример дат у наставку.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Тестирајте одмах Излаз
Након извршења горњег кода, излаз ће бити -
Након што кликнете на дато дугме, излаз ће бити -
Пример2
У овом примеру користимо доцумент.цреатеЕлемент() метод за креирање новог елемента дугмета. Овде користимо инсертБефоре() метод за уметање креираног елемента. Постоји див елемент који има подређени елемент параграфа. Нови елемент дугмета биће уметнут испред подређеног елемента параграфа див елемента.
Погледајмо пример дат у наставку.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Тестирајте одмах Излаз
Након извршења горњег кода, излаз ће бити -
Након што кликнете на дугме изнад, излаз ће бити -
Горњи снимак екрана показује да је нови елемент дугмета уметнут пре елемента пасуса. То је зато што смо користили инсертБеофре() метод за уметање новог елемента креираног коришћењем доцумент.цреатеЕлемент() методом.