ajouter Dynamiquement boîte de recherche en utilisant Javascript pour page web

Question

Je veux ajouter dynamiquement boîte de recherche en utilisant Javascript pour la page web comme montré ici:

initially et finally

Comment puis-je faire?

Answer 1

Il existe de nombreuses façons de s'y prendre .. Sans une bibliothèque javascript, vous pouvez le faire avec quelque chose comme ceci:

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

et avec une bibliothèque javascript, cela devient beaucoup moins de code. Avec jQuery par exemple:

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