简单版发布留言 提示: 1.核心思路: 点击按钮之后,就动态创建一个li,添加到ul 里面。 2.创建li 的同时,把文本域里面的值通过li.innerHTML 赋值给 li 3.如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore 4.当我们把文本域里面的值赋值给li 的时候,多添加一个删除的链接 5.需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的li 6.阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
时间: 2023-07-15 10:10:26 浏览: 90
好的,下面是简单版发布留言的代码实现:
HTML部分:
```html
<textarea id="message" placeholder="请输入留言内容"></textarea>
<button id="submit">提交</button>
<ul id="message-list"></ul>
```
JavaScript部分:
```javascript
// 获取元素
const messageInput = document.getElementById('message');
const submitBtn = document.getElementById('submit');
const messageList = document.getElementById('message-list');
// 添加提交事件
submitBtn.addEventListener('click', function() {
// 获取留言内容
const message = messageInput.value.trim();
if (!message) {
alert('请输入留言内容');
return;
}
// 创建li元素
const li = document.createElement('li');
li.innerHTML = `${message}<a href="javascript:void(0);" class="delete">删除</a>`;
// 添加到留言列表
messageList.appendChild(li);
// 清空留言输入框
messageInput.value = '';
// 添加删除事件
const deleteBtn = li.querySelector('.delete');
deleteBtn.addEventListener('click', function() {
li.remove();
});
});
```
这段代码实现了一个简单的留言板功能,点击提交按钮之后,会在留言列表中动态添加一个li元素,同时在li元素中添加留言内容和删除链接。当点击删除链接时,会删除当前li元素。