帮我写一段js代码,表单form里面有一个div块,div块中包含一个按钮和文本输入框,按钮就可以再添加一个这样的div块
时间: 2024-10-27 10:11:20 浏览: 6
当然可以。这是一个简单的JavaScript和HTML示例,它创建了一个动态生成的表单,当用户点击按钮时会添加一个新的div块到页面上:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加div</title>
</head>
<body>
<form id="myForm">
<div class="container">
<input type="text" placeholder="请输入文字...">
<button onclick="addNewDiv()">添加</button>
</div>
</form>
<script>
function addNewDiv() {
// 获取当前已有的container元素
const container = document.querySelector('.container');
// 创建新的div元素
const newDiv = document.createElement('div');
newDiv.classList.add('new-block');
// 新增一个输入框和按钮
const input = document.createElement('input');
input.type = 'text';
input.placeholder = '请输入文字...';
const addButton = document.createElement('button');
addButton.textContent = '添加';
addButton.onclick = function() { addNewDiv(); };
// 将新元素添加到container内
newDiv.appendChild(input);
newDiv.appendChild(addButton);
container.appendChild(newDiv);
}
</script>
</body>
</html>
```
在这个例子中,当你点击添加按钮时,就会在现有div中动态插入一个新的输入框和按钮,再次点击按钮则会继续添加。每个新增的div都有相同的结构。
阅读全文