本文介绍如何使用JavaScript制作一个简单的网页留言板。通过获取textarea输入框和按钮元素，点击按钮时创建li节点，将输入内容赋值给li并插入到ul列表的第一个孩子前面，实现留言的实时显示。
JavaScript实现网页留言板功能
JavaScript网页留言板示例，供参考。
浏览网页时，用户常会发表留言。如何制作这样的留言板？
构建一个简单的留言板。
首先，需要一个textarea输入框和一个按钮，以及一个ul标签（无需预置li元素），并用CSS进行简单样式修饰。
接着，获取相关DOM元素。点击按钮时，创建一个li节点，将textarea中的文本赋值给该li，并将其插入到ul的第一个子元素之前。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言发布</title>
<style>
body {
margin: 200px;
}
*{
margin: 0px;
padding: 0px;
}
li {
list-style: none;
width: 500px;
height: 30px;
margin-top: 5px;
border: 1px solid black;
background-color: pink;
}
textarea{
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
//获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
//注册时间
btn.onclick = function(){
if(text.value == ''){
alert("您没有输入内容。")
return false;
}else{
var li = document.createElement('li');
li.innerHTML = text.value;
//ul.appendChild(li);
ul.insertBefore(li,ul.children[0])
}
text.value='';
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。