Question

我正在尝试实现一个简单的函数，它获取一些元素列表（在这种情况下，我传递一些<li>元素）并以随机顺序将它们附加到某个父节点（<ul>）。要做到这一点，我写了类似的东西：

console.log(tmpList);
var maxIndex = tmpList.length;
while(tmpList.length > 0) {
    var curIndex = Math.floor(Math.random() * maxIndex);
    if(tmpList[curIndex] && tmpList[curIndex].nodeType===1) {
        var elem = tmpList.splice(curIndex, 1);
        console.log(elem);
        parent.appendChild(elem);
    }
}

正如您所看到的，我确实检查随机选择的索引是否实际上仍然存在于tmpList中，以及它是否真的是html元素。但是，当我运行此代码时，我得到：

[li, li, li, li]
[li]
NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

我做错了什么？

PS。请不要给我像＆＃34;使用jquery＆＃34;或者＆＃34;只使用innerHTML和＃34;来连接它。因为我有理由不能使用它们。

[edit] parent元素早先定义了几行，但事实并非如此。

更新

我根据一个答案做了一些更改，所以代码如下：

while(tmpList.length > 0) {
    var curIndex = Math.floor(Math.random() * tmpList.length);
    var elem = tmpList.splice(curIndex, 1);
    console.log(elem);
    if(elem instanceof HTMLElement) {
        //console.log(curIndex);

        console.log(elem);
        parent.appendChild(elem);
    }
}
return true;

现在它看起来好一点但仍然很奇怪。现在控制台输出是：

[li, li, li, li]
[li]
[li]
[li]
[li]

所以它有li元素，但不会将它们视为HTMLNode ...：o（当我使用elem !== null && elem !== undefined && elem.nodeType === 1时，结果相同）

Answer 1

您在maxIndex之前声明了while，而在while中您更改了数组，所以我建议您更改：

var curIndex = Math.floor(Math.random() * maxIndex);

to（这将确保curIndex始终小于tmpList.lenght）

var curIndex = Math.floor(Math.random() * tmpList.length);

然后拼接你的数组并验证你的元素:(为了更好的验证你应该检查你的elem是否是html元素）

while(tmpList.length > 0) {
    var curIndex = Math.floor(Math.random() * tmpList.length);
    if (curIndex < tmpList.lenght){
        var elem = tmpList.splice(curIndex, 1);
        // array.splice returns array of removed from array elements, so you need work with first element in that array.

        if (elem[0] instanceof HTMLElement && elem[0].nodeType === 1){
            //Add to parent:
            parent.appendChild(elem[0]);
        }
    }
}

Answer 2

您没有名为parent

的元素

Answer 3

好的，我发现了问题。特技是elem保存包含一个匹配元素的列表。解决方案是使用elem[0]。

JS DOM追加孩子不起作用

3 个答案: