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

使用Javascript动态添加搜索框到网页

1 个答案: