Javascript 设置div以显示数组

我试图将数组设置为脚本创建的div的innerHTML，以便在sort函数的任何步骤上显示数组。我越来越

无法将属性“innerHTML”设置为null

arr是数组的名称

以下是我正在使用的代码：

function bubbleSort(arr){
    var swapped,
        container = document.getElementById("container"),
        o = 0;
    console.log("entered bubbleSort");
    do {
        swapped = false;
        for (var i=0; i < arr.length-1; i++) {
            console.log(arr);
            o + 1;
            container.innerHTML += '<div id = "div"+ o></div>';
            document.getElementById("div" + o).innerHTML = arr[i];
            if (arr[i] > arr[i+1]) {
                var temp = arr[i];
                arr[i] = arr[i+1];
                arr[i+1] = temp;
                swapped = true;
            }
        }
    } while (swapped)
}

函数bubbleSort（arr）{
var交换，
container=document.getElementById（“container”），
o=0；
console.log（“输入bubbleSort”）；
做{
交换=假；
对于（变量i=0；iarr[i+1]）{
var-temp=arr[i]；
arr[i]=arr[i+1]；
arr[i+1]=温度；
交换=真；
}
}
}while（交换）
}

以以下方式创建新元素：

var newDiv = document.createElement("div");
newDiv.id = "div"+o;
container.appendChild(newDiv);
document.getElementById("div" + o).innerHTML = arr[i];

编辑： 你实际上只是打错了字。见RobG评论。此方法更有效，并且不会删除以前绑定的事件

---

正在工作的JSFIDLE:

通过以下方式创建新元素：

var newDiv = document.createElement("div");
newDiv.id = "div"+o;
container.appendChild(newDiv);
document.getElementById("div" + o).innerHTML = arr[i];

编辑： 你实际上只是打错了字。见RobG评论。此方法更有效，并且不会删除以前绑定的事件

---

正在工作的JSFIDLE:

您的代码有两个问题。以下一行：

o + 1;

container.innerHTML += '<div id = "div"+ o></div>';
                                      ^^^^^

什么也不做。我认为您的意思是增加

o

，因此请使用：

++o;

此外，下一行中还有一个输入错误：

o + 1;

container.innerHTML += '<div id = "div"+ o></div>';
                                      ^^^^^

container.innerHTML+=''；
^^^^^

您应该使用的是：

container.innerHTML += '<div id="div' + o + '"></div>';
                                     ^^^^^^^

container.innerHTML+=''；
^^^^^^^

您可能会发现使用DOM方法更方便，但以下是您的原始函数，其中的拼写错误已修复：

函数bubbleSort（arr）{
var交换，
container=document.getElementById（“container”），
o=0；
console.log（“输入bubbleSort”）；
做{
交换=假；
对于（变量i=0；iarr[i+1]）{
var-temp=arr[i]；
arr[i]=arr[i+1]；
arr[i+1]=温度；
交换=真；
}
}
}while（交换）
}
气泡运动（[2,1,3]）
您的代码有两个问题。以下一行：

o + 1;

container.innerHTML += '<div id = "div"+ o></div>';
                                      ^^^^^

什么也不做。我认为您的意思是增加
o
，因此请使用：

++o;

此外，下一行中还有一个输入错误：

o + 1;

container.innerHTML += '<div id = "div"+ o></div>';
                                      ^^^^^

container.innerHTML+=''；
^^^^^

您应该使用的是：

container.innerHTML += '<div id="div' + o + '"></div>';
                                     ^^^^^^^

container.innerHTML+=''；
^^^^^^^

您可能会发现使用DOM方法更方便，但以下是您的原始函数，其中的拼写错误已修复：


函数bubbleSort（arr）{
var交换，
container=document.getElementById（“container”），
o=0；
console.log（“输入bubbleSort”）；
做{
交换=假；
对于（变量i=0；iarr[i+1]）{
var-temp=arr[i]；
arr[i]=arr[i+1]；
arr[i+1]=温度；
交换=真；
}
}
}while（交换）
}
气泡运动（[2,1,3]）
'
应该是
'
'
应该是
'
。