Dom聊天信息的生成原理作业

原创 2019-05-19 23:38:48 1700
摘要:<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></titl

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{margin: 0; padding: 0; list-style: none;}
            ul{width: 500px;height: 400px; background: #fafafa; margin: 0; padding: 0;}
            ul li{padding: 10px;}
            div{width: 500px;height:100px; background: #eee;}
            div input{width: 360px; float: left; margin-top: 25px; margin-left: 20px;  height:50px; line-height: 50px;padding: 0 10px; border: none;}
            div button{width: 80px; margin-top: 25px; height: 50px;line-height: 50px; text-align: center; border: none; background: #ffa200; color: #fff;}
        </style>
    </head>
    <body>
        <ul>
            
        </ul>
        <div><input type="text" ><button>提交</button></div>
        <script type="text/javascript">
            let input = document.getElementsByTagName('input')[0];
            let button = document.getElementsByTagName('button')[0];
            let ul = document.getElementsByTagName('ul')[0];
            
            button.onclick = function(){
                let li = document.createElement('li');
                li.innerHTML = input.value;
                ul.appendChild(li);
                input.value='';
            }
        </script>
    </body>
</html>

批改老师:天蓬老师批改时间:2019-05-20 09:29:59
老师总结:可以实现简单的元素添加, 但还没有实现插入到头部, 应该后面还有吧

发布手记

热门词条