今天完成的事情：刚把任务2的乱序完成。
明天计划的事情：把任务2完成
遇到的问题：输入的元素不能让他们有规律的排列，会挤在一起，这里有个办法，在CSS样式表里写好要添加的类的属性。

.li{
    display: inline-block;
    width:36%;
    padding-bottom: 1%;
    padding-top: 2%;
}

像这样我先把要JS要创建的节点的属性写好，然后创建一个节点，然后让节点的class等于这个类

box4.className = "box4";

这样我创建的box4的节点就有了.li的属性。这样就能正常排列了。

关于前面的有色小方块，也是同理，在样式表里先写好有色小方块的属性，然后创建节点把类名给到这个节点。然后一次性把小方块和文本都追加给box就行了。

//创建<li>节点
var para = document.createElement("li");
para.className = "li";
//创建文本节点
var txt1 = document.createTextNode((i + 1) + "　号" + array[i]);
para.appendChild(txt1);
//把文本节点追加到<li>里
//把<小方块>追加到<box1>里
jk.appendChild(box4);
//把<li>追加到<box1>里
jk.appendChild(para);

今天还学到了另一种创建文本节点的方法，其实也不叫创建文本节点，是赋予一个变量的文本。

para.innerText = (i+1) + "号" +array[i];

这个方法也是可以追加文本的，比创建文本节点更简单一点，用innerText属性。

还有就是多次点击按钮不会让节点无限创建，就是点击一次清空一次。一开始嘉豪让我在函数开头用children来获取那个DIV下面所有的子节点，然后再用for循环，removeChild()删除所有的节点，但是一直不成功，我是先获取DIV的节点，然后再用一个变量去获取这个div变量的节点，没找到原因，在翻资料的时候看到innerHTML属性，感觉这个可以解决。果然在函数开始加

jk.innerHTML = "";

jk是我用来显示元素的DIV，这个代码可以清空这个DIV，原理是这个代码=右边的文本，文本设置为空，就可以实现点击的时候清空DIV了。

最后就是乱序，我一开始写的时候逻辑有问题，把两个数组分别输出，而不是先分配好再输出总数组，所以乱序就写不了，重新写了，把两个数组先分配好，再给数组赋值，然后用

concat

把两个数组链接起来，然后再输出总数组 用if 和 else if 的方法，之前一直以为这两个只能执行一个，

一个为真另一个就是假，今天才知道 if 是一种情况 ，else是出了if的情况，但是else if就是另一种情况，就是两种情况并存的情况，这里用if输出杀手数组，else if输出水民数组，就解决了。

收获：了解了if 和 else if，好像while做不到这种情况？，还有获取所有子节点和删除节点的函数，虽然没有用成功，但是让我认识了这两个函数，还有就是innerHTML和innerText，虽然这两种我不是很分得清，但是innerHTML更粗暴我是知道的，会把等于号右边的所有的东西都变成文本，另一个好像更软一点。还有创建的节点竟然可以引用CSS的类！！这太方便了。