Question

我试图将li元素从包含4个元素（第一，第二，第三，第四）的li列表移动到新创建的ol元素。我决定创建ol elemend并在for循环中将元素附加到它，然后使用replacechild来切换列表，但我得到的结果是一个新的ol列表，里面只有两个元素：first，third < / p> 似乎迭代器一次跳过一个元素，我不明白为什么？

HTML：

<input type="button" value="update" onclick="updateList()">
<ul id="ul"><li>first</li><li>second</li><li>third</li><li>fourth</li></ul>

JavaScript的：

function updateList() {

    var list = document.getElementById("ul");
    var newList = document.createElement("ol");

    var nodes = list.childNodes;

    for(i = 0; i < nodes.length; i++) {
        newList.appendChild(nodes[i]);
    }
parent = list.parentNode;
parent.replaceChild(newList, list)

}

Answer 1

移动元素0时，元素1变为元素0，依此类推。只需将它们移动到while循环中，它们就存在：

function updateList() {

    var ul = document.getElementById("ul"),
        ol = document.createElement("ol");

    while (ul.childNodes.length) {
        ol.appendChild(ul.childNodes[0]);
    }

    ul.parentNode.replaceChild(ol, ul);
}

<input type="button" value="Update" onclick="updateList()">
<ul id="ul"><li>first</li><li>second</li><li>third</li><li>fourth</li></ul>

试图将内容从ol转移到ul

1 个答案: