DOM manipulation and Javascript Data Structures: Flat or Structured?

I have a business requirement (which is not going to change) to display about 10,000 items on a page (I don't like it). The items are related via a parent child relationship much like folders, sub folders and files on a disk drive.

I want to build the page in such a way that it is driven by a javascript data structure (internal application, javascript will always be enabled).

Is it generally better to have a flat data structure where each record contains a link to its parent, or is it generally better开发者_开发问答 to have a structured data structure where each "folder" contains references to "sub folders" and "files"?

Ie:

var items = { //flat array
              {id:1, parentId:0}, 
              {id:2, parentId:1},
              {id:3, parentId:1},
              {id:4, parentId:2},
              {id:5, parentId:2}
            };

var items = { //structured
             { id: 1, children: {
               { id: 2, children: {
                 { id: 4 },
                 { id: 5 },
               } },
               { id: 3 },
             } }
            };

Off the bat the flat format seems easier on the eyes, but the server will be generating that list so honestly that isn't such a big deal. How would performance compare? With flat, there would need to be much more DOM lookups, ie find element with id=1 and insert DOM element for id=2. The structured format has all the relationships defined so as the javascript code is navigating the structure it can create all the DOM elements needed without additional lookups. So which method would generally be more performant?

Structured. It's more scalable and will be easier to manipulate nodes in the DOM with JQuery.