Динамически добавить окно поиска с помощью Javascript на веб-страницу

Question

Я хочу динамически добавить окно поиска с использованием Javascript на веб-страницу, как показано здесь:

изначально и наконец

как я могу это сделать?

Answer 1

Есть много разных способов сделать это .. Без библиотеки javascript вы можете сделать это примерно так:

var form = document.createElement('form');
form.setAttribute('action', '/some_path');
form.setAttribute('method', 'post');

var text_field = document.createElement('input');
text_field.setAttribute('type', 'text');
text_field.setAttribute('value', 'enter something here...');

var button = document.createElement('input');
button.setAttribute('type', 'submit');
button.setAttribute('value', 'Go!');

form.appendChild(text_field);
form.appendChild(button);

document.body.appendChild(form);

и с библиотекой javascript, это становится намного меньше кода .. С jQuery например:

var form       = $('<form>').attr({action: '/some_path', method: 'post'}),
    text_field = $('<input>').attr({type: 'text', value: 'enter something here...'}),
    button     = $('<input>').attr({type: 'submit', value: 'Go!'});

form.append(text_field);
form.append(button);

$('body').append(form);