项目---写留言

磊娃哟

于 2018-10-14 15:25:12 发布

阅读量190

点赞数

分类专栏：项目

本文链接：https://blog.csdn.net/qq_43233643/article/details/83047567

版权

项目专栏收录该内容

14 篇文章

订阅专栏

<!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>

在这里插入图片描述