javascript html appendchild createelement

Having trouble with createElement and appendChild

I have a reasonably simple idea that I would like to implement.

I have an array of objects with two properties: "id" and "name" I would like to list these in a series of "p" tags that would be within a "div".

So here is the HTML:

<body>
    <div id="listView"></div>
</body>

And here is the JavaScript in the tag:

sessionStorage.eventid = 2;
var playerList = [];
playerList[0].id = 0;
playerList[0].name = "Add New Player";
playerList.push({
    id: 5,
    name: "Asako"
});
playerList.push({
    id: 6,
    name: "James"
});
playerList.push({
    id: 7,
    name: "Brian"
});
playerList.push({
    id: 8,
    name: "Helmut Spargle"
});

function listAll() {
    var element = document.getElementById("listView");
    var div;
    var node;
    for (var i = 0; i < playerList.length; i++) {
        div = document.createElement("div");
        div.setAttribute("onClick", "javascript: formOver(" + playerList[i].id + ")");
        node = "<p>" + playerList[i].name + "<br />\n" +
        "<small>&nbsp</small>\n" +
        "</p>\n";
        div.appendChild(node);
        element.appendChild(div);
    }
}
window.onLoad = function(){
    listAll();
}

This doesn't fill the with anything. I have put this up on JSFiddle as well.

Have I misunderstood how Array.push works? Or something to do with appendChile and createElement?

Thanks in advance for your help.

Solution

Two problems - up front, trying to set the id and name on playerList[0] (which doesn't exist yet) won't work.

Second, trying to add a whole "node" full of html, jQuery-style, doesn't work in a plain-JS world. You need to build up the individual elements.

sessionStorage.eventid = 2;
var playerList = [];

playerList.push({
    id: 0,
    name: "Add New Player"
});
playerList.push({
    id: 5,
    name: "Asako"
});
playerList.push({
    id: 6,
    name: "James"
});
playerList.push({
    id: 7,
    name: "Brian"
});
playerList.push({
    id: 8,
    name: "Helmut Spargle"
});

function listAll() {

    var element = document.getElementById("listView");
    var div = document.createElement("div");
    var node = "some string";
    for (var i = 0; i < playerList.length; i++) {
        div = document.createElement("div");
        div.setAttribute("onClick", "formOver(" + playerList[i].id + ")");

        var p = document.createElement('p');
        p.innerHTML = playerList[i].name;

        var br = document.createElement('br');
        p.appendChild(br);

        var small = document.createElement('small');
        small.innerHTML = '&nbsp;';
        p.appendChild(small);

        div.appendChild(p);

        element.appendChild(div);
    }
}
listAll();

Example: http://jsfiddle.net/NF45y/