动态使用Javascript功能来

Question

网页

我想使用JavaScript网页动态添加搜索框中添加搜索框，就像这里显示：

initially和finally

我怎么能做到这一点？

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