下面我们接着介绍创建节点。
创建节点，插入节点的方式，就好像是买一个大袋子，一个大袋子里装着一些小袋子，小袋子里分别装着不同的东西。
我们来看看代码就一目了然了：
大袋子（city）里装着很多小袋子（li），小袋子里装着不同的东西（不同的城市名字的文本），没错吧？很简单。
难道JavaScript只能支持这么low的做法吗？当然不是，还可以在现有已经存在的节点中互换双方的位置。当然，需要一个中间变量做转换。
代码如下：
下面我们要介绍一下弹出可以选择是和否的对话框，也就是confirm()方法了。
练习需求：为每一个li节点添加一个confirm()，若确定，则删除，结合我们的removeChild()方法，这个练习so easy。
代码如下：
JavaScript还提供了insertBefore()方法，允许我们可以将某节点插入到指定节点的前面。
代码如下：
//把#hj插入到#bj的前面var cityNode = document.getElementById("city");var bjNode = document.getElementById("bj");var hjNode = document.getElementById("hj");cityNode.insertBefore(hjNode, bjNode); 但是并没有提供insertAfter()方法。那我们就自定义一个吧！
思路是这样的：先检查指定节点是否为父节点的最后一个节点。如果是，那就直接appendChild()，因为这个方法默认放到最后；如果不是，那么就获取下一个节点，也就是.nextSibling()方法，然后再使用insertBefore()方法。
代码如下：
下面我们要做几个练习，HTML文档如下：
你喜欢哪个城市？
- 北京
- 上海
- 东京
- 首尔
你喜欢哪款单击游戏？
- 红警
- 实况
- 魔兽
- 星际
name:
需求如下：需求1:点击submit按钮时，检查是否选择type，若没有选择就给出提示：“请选择类型”；
检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”；
若检查都通过，则在相应的ul节点中添加对应的li节点；
需求2：使包括新增的li都能响应onclick事件，弹出li的文本值。
根据需求的描述，我们可以知道，其实所有的事件触发都在button上，那么就可以将所有的逻辑判断都加入到button上。
代码如下：
新的需求如下：需求：为所有的li节点添加onclick响应函数；
实现city子节点和game子节点对应位置的元素的互换。
思路是这样的：根据标签名获取到所有的li节点，这样一来，li就在一个数组里面有属于自己的下标了。根据提供的HTML文档，我们可以让（0,1,2,3）和+4的交换，让（4,5,6,7）和-4的交换。
交换结束之后，我们不仅仅是交换节点内容，我们还需要重新赋予onclick事件，还需要将新的下标赋予它。
代码如下：
很简单吧！
下面我们又来一个一份新的HTML文档，文档如下：
你爱好的运动是？ 全选/全不选 足球 篮球 排球 乒乓球
一看这份文档，我们第一反应肯定是与按钮事件响应有关了。
需求：当点击id为checkedAll的按钮时，先检查下面的爱好选择做出选择：如果爱好全部被选择，那么checkedAll按钮要做的事情就是“全不选”；否则就是“全选”功能。
下面的button按钮根据名字就可以得知了。
每当爱好全部被打上钩时，checkedAll按钮也要被打上钩；只要不满足前面的条件，checkedAll按钮不能被打上钩。
看上去很绕，其实理清了思路，非常简单。需求正好就是我们的思路方向。
代码如下：
最后一份HTML文档从天而降。文档如下：
添加新员工
| name: | email: | salary: |
| name | Salary | ||
|---|---|---|---|
| Tom | tom@tom.com | 5000 | |
| Mary | mary@mary.com | 10000 |
需求：新增按钮：将员工的姓名、邮箱和薪水添加到表格中；
删除按钮：confirm()提示是否将"员工名字"信息删除？确定将整行员工信息删除，否则什么也不做。
新增按钮要做的事情，其实就是文章一开始要叙述的东西，也就是把某物品装进大袋子的事情。
删除按钮，其实只要能获取到它的父节点，也就解决了。
代码如下：
今天就到这里，我们下次再见！