engwar wrote:
It's the next step that has me stuck. How do I create the new layer and
dynamically populate it with the contents of my array?
If you know the HTML structure you want to build (HTML does not know
layers but it has elements like <div> elements and then CSS can be
applied to those elements to stack them if needed (position and z-index
CSS properties) then you simply need to learn the W3C DOM where in a
HTML document you can create any element if you know its tag name as
follows:
var element = document.create Element('tagnam e')
e.g. for a <div> element object you do
var div = document.create Element('div');
Now within the HTML DOM you can script most HTML attributes of the HTML
element as properties of the script object created so you can do
div.id = 'layer1';
// class attribute is scripted as className property
div.className = 'css-class-name-here';
If you want to script the CSS inline style of an element object then you
can set and read
div.style.cssPr opertyName
e.g.
div.style.posit ion = 'absolute';
div.style.zInde x = '10';
div.style.left = '100px';
div.style.top = '200px';
To fill an element with content you simply create other nodes (e.g.
elements and text nodes) as needed and use DOM methods like appendChild
or insertBefore to put one node into the other e.g.
var p = document.create Element('p');
p.appendChild(d ocument.createT extNode('Kibolo gy for all.'));
// insert into div created earlier
div.appendChild (p);
Now you have a complete <div> element object with CSS inline style and
with content created and all you need to do to have it show up is insert
it into some other node already in the document e.g. in the document
body as the easiest approach
document.body.a ppendChild(div) ;
So there is nothing special nowadays to create layers, the DOM allows to
use the same approach to create any HTML element there is as an object,
set its attributes as properties and insert content by creating contents
as nodes as well and inserting them into some container element.
You can do that with IE 5 and later, Netscape 6 and later, Opera 7 and
later, and other modern browsers around like Safari or Konqueror.
Granted, in reality there are some issues with the general approach
working flawlessly where implementations are not complete or build on
legacy stuff but it surely helps to understand and use that approach
first and then look for the issues with one browser or the other for
certain elements or attributes.
The DOM inspector of Mozilla or Firefox is a nice tool to learn about
the DOM by simply loading a static HTML document and see how this
translates into the DOM tree object model with the document node having
anything else as child nodes or descendant nodes, with the root element
(the <html> element in HTML) being a child node of the document node and
that root element containing all other elements as child or descendant
nodes.
--
Martin Honnen
http://JavaScript.FAQTs.com/ 
