仿聊天记录页面

原创 2018-11-23 16:19:01 573
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>重复你的话</title>    &nbs
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>重复你的话</title>
    <style type="text/css">
        li{list-style: none;color:blue;background: pink;margin: 10px auto;}
    </style>
</head>
<body>
    <input type="text" name="info">
    <button>发送</button>
    <ul style="width:480px;">
        
    </ul>
    <script type="text/javascript">
        //获取元素
        let input = document.getElementsByName('info')[0];
        let button = document.getElementsByTagName('button')[0];
        let ul = document.getElementsByTagName('ul')[0];

        button.onclick = function() {
         let li = document.createElement('li'); // 创建列表项li
         li.innerHTML = input.value;    // 填充内容
         ul.appendChild(li);    //将内容添加到列表中
         input.value = '';  //清空文本框
        };
    </script>
</body>
</html>

实现功能

复习 getElementsByName()

         getElementsByTagName()

        createElement()

        appendChild()

的使用

批改老师:天蓬老师批改时间:2018-11-23 16:30:14
老师总结:获取元素的是这个案例的重点, 生成元素分二步,创建节点并生成内容,然后插入到页面中

发布手记

热门词条