这段代码实现了一个简单的评论系统，用户可以输入评论并提交，评论会显示在页面上，同时可以通过点击“删除”按钮来删除相应的评论。
实现效果：
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>评论系统</title>
<style>
#comments {
margin-top: 20px;
font-size: 12px;
}
.comment {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
position: relative;
}
.delete-btn {
position: absolute;
top: 5px;
right: 5px;
background-color: red;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>发表评论</h1>
<textarea id="commentInput" placeholder="请输入评论..." rows="5" cols="40"></textarea><br>
<button id="submitComment">提交评论</button>
<div id="comments"></div>
<script>
document.getElementById('submitComment').addEventListener('click', function() {
const commentInput = document.getElementById('commentInput');
const commentText = commentInput.value.trim();
if (!commentText) {
return alert('评论不能为空！');
}
// 创建评论元素
const commentDiv = document.createElement('div');
commentDiv.className = 'comment';
commentDiv.textContent = commentText;
// 添加删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = '删除';
deleteBtn.onclick = function() {
commentsDiv.removeChild(commentDiv);
};
commentDiv.appendChild(deleteBtn);
// 获取评论区元素
const commentsDiv = document.getElementById('comments');
commentsDiv.prepend(commentDiv); // 使用 prepend 插入到最前面
// 清空输入框
commentInput.value = '';
});
</script>
</body>
</html>部分代码解析：
document.getElementById('submitComment').addEventListener('click', function() {
const commentInput = document.getElementById('commentInput');
const commentText = commentInput.value.trim();
if (!commentText) {
return alert('评论不能为空！');
}
// 创建评论元素
const commentDiv = document.createElement('div');
commentDiv.className = 'comment';
commentDiv.textContent = commentText;
// 添加删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = '删除';
deleteBtn.onclick = function() {
commentsDiv.removeChild(commentDiv);
};
commentDiv.appendChild(deleteBtn);
// 获取评论区元素
const commentsDiv = document.getElementById('comments');
commentsDiv.prepend(commentDiv); // 使用 prepend 插入到最前面
// 清空输入框
commentInput.value = '';
});这段 JavaScript代码 ，用于处理用户的评论输入和展示。以下是逐步解析：
-
事件监听：
document.getElementById('submitComment').addEventListener('click', function() {当用户点击 ID 为
submitComment的按钮时，会触发这个事件监听器。 -
获取输入内容：
const commentInput = document.getElementById('commentInput'); const commentText = commentInput.value.trim();这两行代码获取 ID 为
commentInput的输入框，并获取用户输入的文本，去除前后空格。 -
空输入检查：
if (!commentText) { return alert('评论不能为空！'); }如果用户没有输入任何评论，会弹出一个警告提示，并停止执行后面的代码。
-
创建评论元素：
const commentDiv = document.createElement('div'); commentDiv.className = 'comment'; commentDiv.textContent = commentText;创建一个新的
div元素，设置其类名为comment，并将用户的评论文本填入。 -
添加删除按钮：
const deleteBtn = document.createElement('button'); deleteBtn.className = 'delete-btn'; deleteBtn.textContent = '删除'; deleteBtn.onclick = function() { commentsDiv.removeChild(commentDiv); }; commentDiv.appendChild(deleteBtn);创建一个删除按钮，设置类名和文本。为按钮添加一个点击事件，当点击时，从评论区中删除该评论。
-
获取评论区元素并添加评论：
const commentsDiv = document.getElementById('comments'); commentsDiv.prepend(commentDiv);获取 ID 为
comments的评论区，并使用prepend方法将新的评论插入到评论区的最前面。 -
清空输入框：
commentInput.value = '';最后，清空评论输入框，以便用户可以输入新的评论。
