javascript - 设置 div 以显示数组

Question

我试图将数组设置为脚本创建的 div 的内部 HTML，以便在排序函数的每一步中显示数组。我正在得到

Cannot set property 'innerHTML' of 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)
}

Answer 1

这样创建新元素:

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

编辑: 其实你只是有一个错字。参见 RobG 评论。此方法只是更高效，并且不会删除以前绑定(bind)的事件。

一个正在运行的 JSFiddle:link