使用jQuery，你可以非常方便地添加和移除HTML元素，以下是一些示例代码，展示了如何实现这些操作：
添加HTML元素
1、在指定元素的末尾添加新元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Add HTML Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p>Existing paragraph.</p>
</div>
<button id="addButton">Add Paragraph</button>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
$('#container').append('<p>New paragraph added!</p>');
});
});
</script>
</body>
</html>2、在指定元素的开头添加新元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Add HTML Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p>Existing paragraph.</p>
</div>
<button id="addButton">Add Paragraph at Start</button>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
$('#container').prepend('<p>New paragraph added at the start!</p>');
});
});
</script>
</body>
</html>移除HTML元素
1、移除指定的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Remove HTML Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p class="removable">Removable paragraph 1.</p>
<p class="removable">Removable paragraph 2.</p>
</div>
<button id="removeButton">Remove First Paragraph</button>
<script>
$(document).ready(function() {
$('#removeButton').click(function() {
$('.removable:first').remove();
});
});
</script>
</body>
</html>2、移除所有匹配的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Remove All HTML Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p class="removable">Removable paragraph 1.</p>
<p class="removable">Removable paragraph 2.</p>
</div>
<button id="removeAllButton">Remove All Paragraphs</button>
<script>
$(document).ready(function() {
$('#removeAllButton').click(function() {
$('.removable').remove();
});
});
</script>
</body>
</html>示例展示了如何使用jQuery来动态地添加和移除HTML元素，你可以根据需要调整选择器和事件处理程序来实现更复杂的功能。