我们如何在HTML代码中添加评论？

介绍

很多网站都提供了用户评论的功能，我们可以在这些网站上看到其他用户对于某一个主题或者某个商品的看法。如果你想让你的网站也能够提供用户评论的功能，那么这篇文章就是为你准备的。我们将会学到如何使用 HTML 和 JavaScript 来添加评论。

HTML 代码

表单标签

首先，我们需要在 HTML 中添加一个表单，以便用户可以输入评论内容。在表单中，我们需要添加以下标签：

1. label 标签：表示输入框的名称。

2. input 标签：用于用户输入评论的文本内容。

3. button 标签：是用户提交评论的按钮。

具体代码如下：

  <form id="comment-form">
    <label for="comment">添加评论</label>
    <input type="text" id="comment" name="comment" placeholder="请输入您的评论">
    <button type="submit" id="submit">提交评论</button>
  </form>

评论列表

接下来，我们需要在 HTML 中添加一个评论列表，以便显示所有用户提交的评论。为此，我们可以使用以下标签：

1. ul 标签：是无序列表标签，用于包含所有的评论。

2. li 标签：是列表项标签，用于包含每条评论和评论者的信息。

3. span 标签：表示评论者的名称。

4. p 标签：表示评论的内容。

具体代码如下：

  <ul id="comments-list">
    <li>
      <span>用户A：</span>
      <p>这是第一条评论内容</p>
    </li>
    <li>
      <span>用户B：</span>
      <p>这是第二条评论内容</p>
    </li>
  </ul>

JavaScript 代码

现在，我们已经添加了表单和评论列表，但是还需要编写 JavaScript 代码，将表单中的评论信息添加到评论列表中。

获取表单数据

首先，我们需要编写 JavaScript 代码来获取用户输入的评论。我们可以使用以下代码获取表单中输入框的值：

  var comment = document.getElementById("comment").value;

在列表中添加新的评论

接下来，我们需要将新的评论添加到评论列表中。我们可以使用以下代码创建一个新的 li 元素，并将评论的内容添加到 p 标签中：

  // 新建一个 li 标签
  var newComment = document.createElement("li");
  
  // 创建 span 标签并添加评论者的名称
  var commenterName = document.createElement("span");
  var commenter = "匿名用户";
  commenterName.textContent = commenter + "：";
  
  // 创建 p 标签并添加评论内容
  var commentContent = document.createElement("p");
  commentContent.textContent = comment;
  
  // 将 span 和 p 标签添加到新的 li 标签中
  newComment.appendChild(commenterName);
  newComment.appendChild(commentContent);
  
  // 将新的评论添加到评论列表中
  var commentsList = document.getElementById("comments-list");
  commentsList.appendChild(newComment);

完整代码

下面是完整的 HTML 和 JavaScript 代码，你可以将该代码复制粘贴到你自己的 HTML 文件中，以便在你自己的网站上添加评论功能。

  <!-- 在这里添加你的 HTML 代码 -->
  <form id="comment-form">
    <label for="comment">添加评论</label>
    <input type="text" id="comment" name="comment" placeholder="请输入您的评论">
    <button type="submit" id="submit">提交评论</button>
  </form>
  <ul id="comments-list">
    <li>
      <span>用户A：</span>
      <p>这是第一条评论内容</p>
    </li>
    <li>
      <span>用户B：</span>
      <p>这是第二条评论内容</p>
    </li>
  </ul>
  <script>
    var submitButton = document.getElementById("submit");
    submitButton.addEventListener("click", function(event) {
      event.preventDefault();
      var comment = document.getElementById("comment").value;
      
      // 新建一个 li 标签
      var newComment = document.createElement("li");
      
      // 创建 span 标签并添加评论者的名称
      var commenterName = document.createElement("span");
      var commenter = "匿名用户";
      commenterName.textContent = commenter + "：";
      
      // 创建 p 标签并添加评论内容
      var commentContent = document.createElement("p");
      commentContent.textContent = comment;
      
      // 将 span 和 p 标签添加到新的 li 标签中
      newComment.appendChild(commenterName);
      newComment.appendChild(commentContent);
      
      // 将新的评论添加到评论列表中
      var commentsList = document.getElementById("comments-list");
      commentsList.appendChild(newComment);
    });
  </script>

总结

现在，我们已经学习了如何在 HTML 中添加评论功能。通过添加表单和评论列表的标签，我们可以让用户输入和展示评论。同时，我们也学习了如何使用 JavaScript 代码，将表单中用户输入的新的评论添加到评论列表中。现在，你可以在你自己的网站上添加评论功能了，让用户可以留下他们的想法和意见。