JavaScript实现待办事项

efonfighting

发布于 2020-02-13 17:21:05

9280

发布于 2020-02-13 17:21:05

文章被收录于专栏：一番码客一番码客

思路分析

按钮绑定一个点击事件
获取用户输入的内容
创建li元素,把用户输入的内容添加到li标签中
把创建的li元素添加到无序列表
清空输入框

代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>待办事项</title>
    </head>
    <body>
        <input type="text" id="id_input" /> <input type="button" value="确定" onclick="addItem()" />
        <ul id="id_ul">
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>
        </ul>
        <script type="text/javascript">
            //1. 按钮绑定一个点击事件
            function addItem() {
                //2. 获取用户输入的内容
                var inputTag = document.getElementById("id_input");
                var content = inputTag.value;
                //3. 创建li元素,把用户输入的内容添加到li标签中
                // 新建一个li元素
                var liTag = document.createElement("li")
                // 指定li标签中的内容
                liTag.innerHTML = content;
                //4. 把创建的li元素添加到无序列表
                //获取到ul标签
                var ulTag = document.getElementById("id_ul")
                // 把新建的li元素追加到ul之后
                ulTag.appendChild(liTag)
                // 清空输入框
                inputTag.value = ""
            }
        </script>
    </body>
</html>