Разработчиците най-вече искат техните уеб страници да бъдат привлекателни и да ги правят интерактивни. За тази цел към уеб страницата се добавят бутони. Например, когато има нужда от изпращане или получаване на данни, включително събития за щракване за допълнителни функции за потребителя, докато се регистрира или влиза в акаунт. В такива случаи бутоните позволяват на крайния потребител да изпълнява интелигентно различни функции.
Този блог ще обясни методите за създаване на бутони в JavaScript.
Как да създадете бутон в JavaScript?
За да създадете бутон в JavaScript, могат да се използват следните методи:
Следните подходи ще демонстрират концепцията един по един!
Метод 1: Създайте бутон в JavaScript с помощта на методите „createElement()“ и „appendChild()“
„ createElement() ' създава елемент, а ' appendChild() ” добавя елемент към последното дете на елемент. Тези методи ще бъдат приложени за създаване на бутон и добавянето му към обектния модел на документ (DOM), който съответно трябва да се използва.
Синтаксис
документ. createElement ( Тип )елемент. appendChild ( възел )
В горния синтаксис „ Тип ” се отнася до типа елемент, който ще бъде създаден с помощта на метода createElement() и „ възел ” е възелът, който ще бъде добавен с помощта на метода appendChild().
Следващият пример ще обясни заявената концепция.
Пример
Първо, „ бутон ” ще бъде създаден с помощта на метода document.createElement() и съхранен в променлива с име „ createButton ”:
конст createButton = документ. createElement ( 'бутон' )След това „ innerText ” ще препраща към създадения бутон и ще задава текстовата стойност на посочения бутон, както следва:
createButton. innerText = „Click_Me“И накрая, „ appendChild() ” ще добави създадения бутон към DOM, като се позовава на променливата, в която се съхранява като аргумент:
документ. тяло . appendChild ( createButton ) ;Резултатът от горната реализация ще бъде следният:
Метод 2: Създайте бутон в JavaScript с помощта на атрибута „Type“ на тага „input“.
„ Тип ” атрибутът представлява типа входен елемент за показване. Може да се използва за създаване на бутон чрез указване на „ бутон ” като стойността на атрибута тип на тага за въвеждане.
Синтаксис
< тип вход = 'бутон' >Тук, ' бутон ” показва типа на полето за въвеждане.
Вижте дадения по-долу пример.
Пример
Първо, ще използваме таг за въвеждане, задайте неговия тип като „ бутон “, и стойност като „ Click_Me ”. В резултат на това ще бъде създаден бутон. Освен това, това ще задейства „ createButton() ” функция при щракване:
< тип вход = стойност на бутона = Click_Me onclick = 'createButton()' >В JavaScript файла ще дефинираме „ createButton() ” функция, която ще генерира поле за предупреждение, когато се щракне върху добавения бутон:
функция createButton ( ) {тревога ( 'Това е бутон' )
}
Изход
Обсъжданите техники за създаване на бутон в JavaScript могат да се използват по подходящ начин според изискванията.
Заключение
За да създадете бутон в JavaScript, „ createElement() ' и ' appendChild() ” могат да се прилагат методи за създаване на бутон и добавянето му, за да се използва в DOM. Друга техника, която може да се използва за създаване на бутон, е дефинирането на тип въвеждане и добавянето на свързаната функционалност. Тази статия демонстрира методите за създаване на бутон в JavaScript.