Question

I want to dynamically add search box using Javascript to web-page like shown here :

initially and finally

how can i do this?

Answer 1

There are many different ways to go about doing this.. Without a javascript library, you could do it with something like this:

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);

and with a javascript library, this becomes a lot less code.. With jQuery for example:

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);