<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<input type="text" id="text">
<button id="btn">留言</button>
<ul id="ul1">
</ul>
</body>
</html>
<script>
//输入内容,点击留言,创建一个 li ,新留言内容 置顶
// 超过5条留言 删除第一条...
function $id(id) {
return document.getElementById(id);
}
$id("btn").onclick = function () {
//创建li
var li = document.createElement("li")
//创建的li值来源input框
li.innerHTML = $id("text").value;
//将创建的li插入到firstElementChild第一个儿子元素节点(不包含文本节点)前;
//$id("ul1").firstElementChild父节点的某个子节点
$id("ul1").insertBefore(li, $id("ul1").firstElementChild)
//ul1.children.length所有子节点(不包含文本节点,此处的文本节点是空格)的长度
if (ul1.children.length == 6) {
ul1.lastElementChild.remove();
}
}
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e2e9780afed9692798f4a0f921de33cc.png)
在这里插入代码片