Разработчики в основном хотят, чтобы их веб-страницы были привлекательными и интерактивными. Для этого на веб-страницу добавляются кнопки. Например, когда необходимо отправить или получить данные, включая события кликов для дополнительных функций пользователя при регистрации или входе в учетную запись. В таких случаях кнопки позволяют конечному пользователю эффективно выполнять различные функции.
В этом блоге объясняются методы создания кнопок в JavaScript.
Как создать кнопку в JavaScript?
Чтобы создать кнопку в JavaScript, можно использовать следующие методы:
Следующие подходы продемонстрируют концепцию один за другим!
Способ 1: создать кнопку в JavaScript с помощью методов «createElement()» и «appendChild()»
“ создатьЭлемент() ' создает элемент, а метод ' добавить дочерний элемент () ” добавляет элемент к последнему дочернему элементу. Эти методы будут применяться для создания кнопки и ее добавления в объектную модель документа (DOM), которую необходимо использовать соответственно.
Синтаксис
документ. создатьЭлемент ( тип )элемент. appendChild ( узел )
В приведенном выше синтаксисе « тип ” относится к типу элемента, который будет создан с помощью метода createElement(), а “ узел ” — это узел, который будет добавлен с помощью метода appendChild().
Следующий пример пояснит изложенную концепцию.
Пример
Во-первых, « кнопка ” будет создан с использованием метода document.createElement() и сохранен в переменной с именем “ кнопка создания ”:
константа кнопка создания знак равно документ. создатьЭлемент ( 'кнопка' )Далее « внутренний текст » будет ссылаться на созданную кнопку и устанавливать текстовое значение указанной кнопки следующим образом:
создатькнопку. внутренний текст знак равно 'Нажми на меня'Наконец, « добавить дочерний элемент () » добавит созданную кнопку в DOM, ссылаясь на переменную, в которой она хранится в качестве аргумента:
документ. тело . appendChild ( кнопка создания ) ;Вывод приведенной выше реализации будет выглядеть следующим образом:
Способ 2: создать кнопку в JavaScript, используя атрибут «Type» тега «input»
“ тип Атрибут представляет тип элемента ввода для отображения. Его можно использовать для создания кнопки, указав « кнопка ” в качестве значения атрибута type входного тега.
Синтаксис
< тип ввода знак равно 'кнопка' >Здесь, ' кнопка ” указывает тип поля ввода.
Ознакомьтесь с приведенным ниже примером.
Пример
Во-первых, мы будем использовать входной тег, указав его тип как « кнопка ', а значение как ' Нажми на меня ». В результате будет создана кнопка. Кроме того, это вызовет « создатькнопку() ” при нажатии:
< тип ввода знак равно значение кнопки знак равно Click_Me по клику знак равно 'СоздатьКнопку()' >В файле JavaScript мы определим « создатькнопку() », которая будет генерировать окно предупреждения при нажатии добавленной кнопки:
функция кнопка создания ( ) {тревога ( «Это кнопка» )
}
Выход
Обсуждаемые методы создания кнопки в JavaScript можно использовать надлежащим образом в соответствии с требованиями.
Вывод
Чтобы создать кнопку в JavaScript, « создатьЭлемент() ' а также ' добавить дочерний элемент () ” могут применяться для создания кнопки и добавления ее для использования в DOM. Другой метод, который можно использовать для создания кнопки, — это определение типа ввода и добавление соответствующей функциональности. В этой статье продемонстрированы методы создания кнопки в JavaScript.