今日完成：

完成了任务4的页面。

完成思路：

1首先在html页面里写了一个格子的样式。然后在JS里面获取格子ID，接下来把保存在数组里的第一个数据内容写在格子里。

2 第二部，遍历数组的长度-1.因为上一步已经写了一个数据。，每遍历一次，就克隆一次这个格子。

3第三步 ，每克隆一个格子，就按顺序把数组的内容写一次到格子里。

明日计划：

继续任务4

遇到的问题：

第一个遇到的问题。克隆出来格子。把覆盖在格子表面的图片给弄没了。实在弄不出来，然后去找师姐帮忙。师姐看了下原来是我把格子上部分的内容一起改了，

改之前

<div id="role"  class="topbox">
        <img  class="topbox-img"  src="../task2img/ptt.png">
</div>

改之后

<div   class="topbox">
    <div id="role"></div>
        <img  class="topbox-img"  src="../task2img/ptt.png">
</div>

这样写内容就不会把下面的图片给覆盖了。

第二个问题：就是顺序的问题了。

克隆出来的页面，是这样的

JS代码：

arrPersonStr=localStorage.sth;
arrPerson = JSON.parse(arrPersonStr);
console.log("读取的字符串"+arrPerson+"数组的长度"+arrPerson.length);
window.onload = function () {
    var sourceNode = document.getElementById("div"); // 获得被克隆的节点对象
    var changerole = document.getElementById("role");
    changerole.innerText = arrPerson[0];//先改变第一个
    var changesum = document.getElementById("identity");
    changesum.innerHTML ="1号";
    for (var i = 1; i < arrPerson.length; i++) {
        var clonedNode = sourceNode.cloneNode(true); // 克隆节点
        clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复

        sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
        changerole.setAttribute("id", "role-" + i);// 修改一下子节点id 值，避免id 重复

        changesum.setAttribute("id", "identity-" +i);// 修改一下子节点id 值，避免id 重复

        var changerole = document.getElementById( "role-" + i)//
        var changesum = document.getElementById("identity-" +i);
        changerole.innerText = arrPerson[i];//改变文本节点的内容
        changesum.innerHTML = (i+1)+"号";//改变子节点的内容

    }

}

sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点

我感觉是上面这行代码的问题，但测试很多次都不行。我还想元素位置交换，但还想了下还是不行。1查到了一个object.swapNode(targetNode)方法不知道行不行，

2,太麻烦的样子。

现在真是遇到坎了，头昏脑胀，希望师兄们看看，指点下。怎么把位置弄顺。

今日收获;

完成了任务4 的一部分，对获取节点，改变节点更加熟悉 了。