Js单击添加按钮增加输入框
时间: 2024-09-18 12:15:28 浏览: 33
在JavaScript中,你可以通过给"添加按钮"绑定一个`click`事件监听器来实现点击后增加输入框的功能。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动态增加输入框</title>
</head>
<body>
<button id="addInputBtn">添加输入框</button>
<div id="inputArea"></div>
<script>
// 获取按钮元素和初始区域元素
const addButton = document.getElementById('addInputBtn');
const inputArea = document.getElementById('inputArea');
// 定义一个函数,用于创建新的输入框并添加到区域内
function addInputBox() {
const newInput = document.createElement('input'); // 创建一个新的input元素
newInput.type = 'text'; // 设置输入框类型
// 将新输入框添加到指定区域
inputArea.appendChild(newInput);
}
// 绑定按钮的点击事件
addButton.addEventListener('click', addInputBox);
</script>
</body>
</html>
```
在这个例子中,当用户点击"添加输入框"按钮时,会调用`addInputBox`函数,该函数创建一个新的文本输入框,并将其添加到id为`inputArea`的区域内。
阅读全文