Создание элементов с помощью jQuery

Создание и добавление на страницу элемента с помощью jQuery - 1 способ

$('<input>', {
    'type': 'text',
    'id': 'passwd',
    'value': 'pass'
}).appendTo($('#main'))

Создание и добавление на страницу элемента с помощью jQuery - 2 способ

$('#main').append('<input type="button" id="ok_btn" value="OK">')

Создание и добавление на страницу элемента стандартным способом JS

var btn_clr = document.createElement('input')
btn_clr.setAttribute('type', 'button')
btn_clr.setAttribute('value', 'Clear')
btn_clr.setAttribute('id', 'clear_btn')
document.getElementById('main').appendChild(btn_clr)

Вешаем обработчик события по нажатию кнопки с помощью jQuery

$("#ok_btn").click(function () {
    var request = {
        type: 'req',
        data_code: 34
    }

    var request_str = JSON.stringify(request)
    $.ajax({
        url: '/cgi-bin/page.sh',
        method: 'post',
        dataType: 'json',
        data: request_str,
        success: function (data) {
            console.log(data)
        }
    })
})

Вешаем обработчик события по нажатию кнопки стандартным способом JS

var clear_btn = document.getElementById('clear_btn')
clear_btn.addEventListener('click', clear_click)

$('#main').prepend('Input password: ')

function clear_click() {
    console.log(document.getElementById('passwd').value)
    $('#passwd').val("")
}

10 Sep 2021 » JavaScript