仿聊天记录页面

abstract：<!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()

的使用

Correcting teacher：天蓬老师Correction time：2018-11-23 16:30:14
Teacher's summary：获取元素的是这个案例的重点, 生成元素分二步,创建节点并生成内容,然后插入到页面中

仿聊天记录页面

Popular Entries