使用innerHTML新闻列表添加小案例涉及到的知识点有，间隔函数setinterval，点击事件，style操作标签元

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #div1 {
            margin: 100px auto;
            width: 350px;
            border: 1px;
            height: 25px;
        }

            #div1 div {
                width: 350px;
                height: 25px;
                margin-top: 0px;
                margin-bottom: 0px;
                background-color: blueviolet;
            }

            #div1 p {
                float: left;
                margin-top: 0px;
            }

        #stime {
            float: left;
            font-size: 15px;
            line-height: 25px;
            color: antiquewhite;
        }

        #div1 input {
            float: left;
            margin-left: 8px;
            margin-top: 3px;
            border: none;
            background-color: antiquewhite;
        }

        #div1 button {
            float: left;
            margin-top: 3px;
            line-height: 18px;
            margin-left: 8px;
            height: 18px;
            border: none;
            background-color: coral;
        }

        #jia {
            float: right;
            margin-right: 8px;
            color: white;
            font-size: 16px;
        }

        #list {
            padding: 0 5px;
        }

            #list li {
                height: 25px;
                line-height: 25px;
                border-bottom: 1px dotted #aaa;
                font-size: 13px;
                list-style-type: none;
            }

            #list span {
                float: right;
                font-size: 12px;
                line-height: 25px;
            }
    </style>
</head>
<body>
    <div id="div1">
        <div>
            <span id="stime"></span>
            <p id="p">
                <input id="ip1" type="text" />
                <button id="btn">添加</button>
            </p>
            <span id="jia" onclick="show()">+</span>
        </div>
        <ul id="list"></ul>
    </div>
    <script>
        var p = document.getElementById("p");//获取P标签
        //页面加载函数
        window.onload = function () {
            setInterval(function () {
                var stime = document.getElementById("stime");
                var time = new Date();
                stime.innerText = time.toLocaleTimeString();

            }, 1000);//时间动态显示

            p.style.display = "none";//默认打开隐藏P元素标签内容

        }
        function show() {
            p.style.display = "block";//点击加号，显示P元素标签内容
        }
        var btn = document.getElementById("btn");//通过ID获取按钮，执行点击事件
        btn.onclick = function () {
            var time = new Date().toLocaleTimeString();//时间
            var text = document.getElementById("ip1");//获取文本框
            var list = document.getElementById("list");//获取UI
            list.innerHTML += "<li>" + text.value + "<span> " + time + "</span>" + "</li>";//在UI内部添加LI标签，变量用+联系起来
            p.style.display = "none";//添加完后隐藏P元素
            text.value = "";//文本内容为空
        }


    </script>
</body>
</html>
涉及到的知识点有，间隔函数setinterval，点击事件，style操作标签元素的方法,innerHTML