Entry

How do I dynamically create a new layer?

Mar 6th, 2000 01:15
Martin Honnen, William van Zwanenberg,

The different browser have very different methods to dynamically create 
a new layer (after the document is completely loaded).
NN4 has its own Layer object constructor for that task which you pass a 
width argument and an optional parent layer argument (which defaults to 
the window you call the script in):
  var layer = new Layer(200);
This layer object (which is absolutely positioned) can then be scripted 
to set position
  layer.left = 100; layer.top = 200;
background color
  layer.bgColor = 'lime';
dimensions
  layer.clip.width = 200; layer.clip.width = 200;
write content to it
  layer.document.open();
  layer.document.write('<H1>Kibology for all<\/H1>');
  layer.document.close();
set the zIndex
  layer.zIndex = 10;
and make it visible
  layer.visibility = 'show';

IE4 has no constructor call to create new html elements (positioned 
like layers or non positioned) but has powerful methods to add html and 
parse it into the document after the document has loaded. You define 
the html for the element to add for instance
  var html = '<DIV STYLE="position: absolute;';
  html += ' left: 100px; top: 200px;';
  html += ' width: 200px; height: 200px;';
  html += ' background-color: lime;';
  html += '">';
  html += '<H1>Kibology for all<\/H1>';
  html += '<\/DIV>';
and then parse it into the document calling
  object.insertAdjacentHTML('beforeEnd', html)
for instance (best for absolutely positioned top level elements) you 
add it to the body
  document.body.insertAdjacentHTML('beforeEnd', html);
There are other ways to insert html with IE, namely setting innerHTML 
or outerHTML of existing elements.

IE5 can do the above described for IE$ but has additional methods 
compliant with www.w3.org's DOM level specification to create HTML 
elements, manipulate them and insert them into the document tree. These 
DOM methods do also work with NN6. You create every HTML element with
  var element = document.createElement('TAGNAME')
for instance
  var layer = document.createElement('DIV');
then you manipulate that element with DOM methods setting the position
  layer.style.position = 'absolute';
the coordinates
  layer.style.left = '100px';
  layer.style.top = '200px';
the dimensions
  layer.style.width = '200px'; layer.style.height = '200px'
the background color
  layer.style.backgroundColor = 'lime';
You add content by creating further HTML elements
  var h1 = document.createElement('H1');
  h1.appendChild(document.createTextNode('Kibology for all'));
and adding those as childs to the layer
  layer.appendChild(h1);
Finally you add the layer to the document (body):
  document.body.appendChild(layer);

NN6 supports the DOM methods shown above for IE5 but can also parse in 
html, so taking the html example given above for IE4 with NN6 we need 
to create a range element 
  var range = document.createRange();
which then allows to parse the html into a document fragment
  range.setStartAfter(document.body.lastChild);
  var docFrag = range.createContextualFragment(html);
which can be added with DOM methods to the document (body)
  document.body.appendChild(docFrag);