使用jquery的append和remove实现:页面中1个按钮,点击按钮添加一个相同的按钮;同时删除原来的按钮的前端代码
时间: 2024-02-22 13:56:08 浏览: 20
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加删除按钮</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
// 获取按钮元素
var $button = $('#button');
// 绑定点击事件
$button.on('click', function() {
// 创建一个新按钮元素
var $newButton = $('<button>').text('按钮');
// 将新按钮添加到页面中
$button.after($newButton);
// 删除原来的按钮
$button.remove();
});
});
</script>
</head>
<body>
<button id="button">按钮</button>
</body>
</html>
```
这段代码中,我们首先引入了 jQuery 库。然后在 `$(function() {})` 中编写代码,它会在页面加载完成后执行。
我们获取页面中的按钮元素,并绑定了点击事件。当按钮被点击时,我们创建一个新的按钮元素,并使用 `after` 方法将其添加到原来按钮的后面。然后,我们使用 `remove` 方法删除原来的按钮元素。