JS实现简易留言板（节点操作）

下面是实现简易留言板的攻略。

需求分析

我们需要实现一个基本的留言板功能，包含以下几个功能：

1. 用户可以在留言板中输入内容并提交
2. 留言板会显示所有用户提交的留言

实现过程

1. HTML部分

我们需要在HTML页面中添加以下元素：

<div>
  <h2>留言板</h2>
  <div>
    <textarea id="messageInput"></textarea>
    <button id="submitButton">提交留言</button>
  </div>
  <ul id="messageList"></ul>
</div>

其中，id="messageInput"表示留言内容输入框的ID，id="submitButton"表示提交按钮的ID，id="messageList"表示存储留言的列表。

1. JS部分

首先我们需要获取到输入框和按钮元素的引用：

const messageInput = document.getElementById('messageInput');
const submitButton = document.getElementById('submitButton');

接下来我们为提交按钮添加点击事件监听器，当用户点击提交按钮时，我们需要将输入框中的内容添加到留言列表中：

submitButton.addEventListener('click', () => {
  const messageList = document.getElementById('messageList');
  const message = messageInput.value;
  const li = document.createElement('li');
  li.textContent = message;
  messageList.appendChild(li);
  messageInput.value = '';
});

其中，document.createElement()用于创建新的<li>元素，li.textContent = message用于将输入框中的内容添加到新创建的<li>元素中，并且清空输入框中的内容。

示例说明

示例一

当用户输入“你好，世界！”并点击提交按钮后，留言板会显示以下内容：

你好，世界！

示例二

当用户依次输入“这是第一条留言”、“这是第二条留言”、“这是第三条留言”，并点击提交按钮后，留言板会显示以下内容：

这是第一条留言
这是第二条留言
这是第三条留言

以上就是利用JS实现简易留言板的完整攻略。