<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>解忧杂货店</title>
<link rel="stylesheet" type="text/css" href="/CSS/index.css" />
<link rel="shortcut icon" type="favicon.ico" href="/favicon_logosc/favicon-32x32.png">
</head>
<body style="background-color:pink;">
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1 style="font-family:STXingkai" >解忧杂货店</h1>
<input autofocus="autofocus" autocomplete="off" placeholder="有什么能为你解答的吗?"
class="new-todo" />
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" >
<div class="view">
<span class="index">1</span>
<label>你有什么想问的吗?</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" >
<span class="todo-count">
<strong >1</strong> 待回消息
</span>
<button class="clear-completed">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="#">
<img src="/imges/梨莓莓(145).jpg" />
</a>
</p>
</footer>
</body>
</html>
<script src="/js/记事本.js"></script>
/*
* 1: 点击按钮追加li
* 思路分析:
* 1:获取添加按钮#add 注册点击事件
* 2:获取.header下的.new-todo的value值,追加到新创建的li中的结构里。
* 2.1:注意新创建的li是有属性的。class="todo"
* 2.2:li里不是简单的放入获取的value值,而是有其他的结构,也需要我们创建和追加
* 2.3:li里的span标签的内容innerHTML值应该是动态变化。
* */
// 获取相关对象
let input = document.querySelector('.header .new-todo');
//获取ul对象。整个页面就这一个ul 任何地方操作的都是这个对象。放