批量修改ＤＯＭ

<ul id="mylist">
        <li><a href="http://phpied.com">Styoo</a></li>
        <li><a href="http://julienlecomte.com">Junior</a></li>
    </ul>
    <p>月落乌啼霜满天，江风渔火对愁眠。</p>

    <script type="text/javascript">
    var data = [
        {
            "name" : "Nicolas",
            "url" : "http://wwww.baidu.com"
        },
        {
            "name" : "Rose",
            "url" : "http://tmall.com"
        }
    ];

    function appendDataToElement(appendToElement, data){
        var a, li;
        for(var i = 0, max = data.length; i < max; i++){
            a = document.createElement('a');
            a.href = data[i].url;
            a.appendChild(document.createTextNode(data[i].name));
            li = document.createElement("li");
            li.appendChild(a);
            appendToElement.appendChild(li);
        }
    }

    var ul = document.getElementById("mylist");

    // 减少重排 ： 使元素脱离文档 --> 隐藏 再 显示
    ul.style.display = "none";
    appendDataToElement(ul, data);
    ul.style.display = "block";


    // 使元素脱离文档 --》 》 在文档之外创建并更新一个文档片段， 然后附加到原始列表中
    var fragment = document.createDocumentFragment();
    appendDataToElement(fragment, data);
    ul.appendChild(fragment);

    // 使元素脱离文档 --<<  为需要修改的节点创建一个备份，然后对副本进行操作，再用新的节点替代旧的节点
    var clone = ul.cloneNode(true);
    appendDataToElement(clone, data);
    ul.parentNode.replaceChild(clone, ul);