用jquery 比如点击按钮则增加input框

封面图 • 2025-10-12 • jQuery

你可以使用 jQuery 来实现“点击按钮则增加一个 `<input>` 输入框”的功能。下面是一个简单的示例代码：

### HTML + jQuery 示例

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>添加输入框示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="addInputBtn">添加输入框</button>
<div id="inputContainer"></div>

</body>
</html>
```

### 功能说明：

- 点击按钮 `#addInputBtn` 时，会动态生成一个新的 `<input type="text">`。
- 新的输入框会被添加到 `#inputContainer` 容器中。

### 可选扩展：

如果你想每次添加多个输入框，或者添加带有标签的输入框，可以修改 `newInput` 的创建方式，例如：

```javascript
var newInput = $('<label>输入框: </label><input type="text" />');
```

或者添加一个删除按钮：

```javascript
var newInput = $('<input type="text" /> <button class="removeBtn">删除</button>');
$('#inputContainer').append(newInput);

// 删除按钮事件
$('#inputContainer').on('click', '.removeBtn', function() {
    $(this).parent().remove();
});
```

如果你有更具体的需求（比如限制最多添加多少个、清空输入等），也可以告诉我，我可以帮你进一步完善代码。