随机打乱innerHTML

Question

我正在尝试洗牌 som innerHTML，如果我从列表中添加内容，我已经创建了一些分区，现在我想在每次加载网站时洗牌。我提出了这个解决方案，它对 innerHTML 进行了洗牌，但它并没有把它放在新的 HTML 中。任何想法如何调整它？稍后我将创建并打乱图像图片的href列表。所以基本上它将是一个 9 方图像随机化器。我真的很想得到一些帮助:)

<script>

var squareNumbers = ['1','2','3','4','5','6','7','8','9']; //need to create a new list to append image hrefs

        for(var i = 0; i<=squareNumbers.length-1; i++){ //creates the chessboard
            var div = document.createElement('div');
            div.setAttribute('id', 'square'+squareNumbers[i]);
            div.innerHTML = squareNumbers[i];
            var checkHTML = document.getElementById('chessBoard').appendChild(div);
        }

        window.onload = function(){
        var squareDivs = document.getElementById('chessBoard').getElementsByTagName('div');
        var array = [];

        for(var i = 0; i < squareDivs.length; i++){ //creates an array of the squares innerHTML
            array.push(squareDivs[i].innerHTML);    
        }

        var i = array.length, j, temp;
        while(--i > 0){ //shuffles the array according to Fisher Yeates algorithm
            j = Math.floor(Math.random() * (i+1));
            temp = array[j];
            array[j] = array[i];
            array[i] = temp;
            var squares = document.getElementById('chessBoard').getElementsByTagName('div').innerHTML = temp;
            console.log(squares);

        }

        }


        </script>

Answer 1

更新

这只是更新它们。

var squareNumbers = ['1','2','3','4','5','6','7','8','9'], j, temp;

for(var i = 0; i < squareNumbers.length; i++){ //creates the chessboard
    var div = document.createElement('div');
    div.setAttribute('id', 'square' + squareNumbers[i]);
    div.innerHTML = squareNumbers[i];
    document.getElementById('chessBoard').appendChild(div);
}

window.onload = function(){

    for (i = squareNumbers.length - 1; i >= 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = squareNumbers[j];
        squareNumbers[j] = squareNumbers[i];
        squareNumbers[i] = temp;
        document.getElementById('chessBoard').getElementsByTagName('div')[i].innerHTML = temp;
    }
}

上一页

这里，这样做：

window.onload = function(){
    var squareNumbers = ['1','2','3','4','5','6','7','8','9'], j, temp;

    for (i = squareNumbers.length - 1; i >= 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = squareNumbers[j];
        squareNumbers[j] = squareNumbers[i];
        squareNumbers[i] = temp;
        var div = document.createElement('div');
        div.setAttribute('id', 'square'+squareNumbers[i]);
        div.innerHTML = squareNumbers[i];
        document.getElementById('chessBoard').appendChild(div);
    }
}