2019-4-28 更新, 给大家一点提示
完成如下所示的“辣鸡记事本”
要求:
- 输入框 ： 当在输入框内按下回车或者点击提交按钮时，在下方添加一个新的便签(添加DOM结点)
- 添加新的便签： 新便签的内容就是输入框内的内容，新note的序号是页面上的上一个便签序号+1,如果页面上没有便签，从1开始
- 每个便签都有一个删除按钮，点击会删除当前的便签(删除元素，不是隐藏元素)
- 删除某个标签后，如果标签的序号不对(中间有空缺)，请重新排列序号补上空缺；
如：[1:A],[2:B],[3:C]
删除2号便签后，变为[1:A],[2:C]
选做功能 ：
- 每个便签的内容区双击，会变成一个
textarea，进入修改内容的状态，此时textarea中默认会展示原始的内容，修改完内容后，点击页面其他部分退出编辑，原始内容已被替换
提示
- 学dom操作，就是在操作页面中的元素，要熟练掌握常用的dom操作的方法，对于元素的增删改查都要有自己的方法 ：
- 增删 ：appendChild(),removeChild(),cloneNode(),insertBefore(),createElement()
- 查询 ：querySelector(),querySelectorAll()
- 修改 ：ele.innerText,ele.innerHTML,ele.style
都要了解他们的机制(作用，参数，返回值)
- 我着重标明了每个便签，是想提醒大家，新添加的note上面也应该有删除事件，但是好像没有人想起来用事件委托，所以提醒一下
- 添加新的note就是为页面添加一个新的元素，创建新元素，可以使用下面三种思路(各有利弊，并不是短的就好)：
// 1. 更改元素内部的内容
con.innerHTML = '<div>gaara<span>han</span></div>'
// 2. 创建新元素并加入
let newNode = document.createElement('div');
newNode.innerText = `gaara`;
let newSpan = document.createElement('span');
newSpan.innerText = 'han';
newNode.appendChild(newSpan);
con.appendChild(newNode);
// 3. 克隆提前写好的dom模板，并加入
<template>
<div>gaara
<span>han</span>
</div>
</template>
<script>
let t = document.querySelector('template').content.querySelector('div');
let newNode = cloneNode('t');
con.appendChild(newNode);
</script>
重新排序，应该不用教吧，注意要做到，删除了元素之后，新添加的元素序号也必须正确：
初始 ： 1:A，2:B，3:C
删除2 ： 1:A，2:C
添加一个新的 ： 1:A,2:C,3:D监听键盘事件，并判断键值 ，这个应该不难，三行代码就能搞定
写代码还得注意代码结构，尽量让代码的功能封装为不同的函数，并起一个容易一眼看懂的名字，这样比较清晰，也有利于整理思路(可以参考我下面的js代码结构)
-
多说一点 ：代码是用来写的，不是看的，编程这东西，练得多点，手熟了就知道该怎么写了 ，这个小练习并不难，都是平时很常用的东西。总共花了不到一个小时，连构思，到代码，到简书。写出来html+css+js总共一百来行，所以就检测一下自己的动手能力吧
