Cross-Browser Dynamic Element Creation with the CBE API

CBE v4b9 includes support for dynamic element creation in browsers that support it. I've tested it quickly with IE5.0, IE6.0, Mozilla0.9.7, NN4.79, and Opera6.01. It doesn't work in Opera but doesn't cause an error.

Please make a post at the forum if you have any problems.

The FOO element is created by html, and the BAR, COD, and SOK elements are created dynamically. BAR is appended as a child of FOO. COD is appended as a child of document. SOK is appended as a child of COD.

Here's the javascript for this page.

function windowOnload() {
  // Element object from html
  var foo = document.getElementById('FOO');
  with (foo.cbe) {
    color('#FFFFFF');
    background('#008000');
    resizeTo(300,300);
    moveTo('ne');
    show();
    addEventListener('dragResize');
  }
  // Create an Element as a child of FOO
  var bar = document.cbe.createElement("DIV");
  if (bar) {
    bar.id = 'BAR';
    foo.cbe.appendChild(bar);
    with(bar.cbe) {
      color('#000000');
      background('#FFFF00');
      resizeTo(150,150);
      moveTo('se');
      show();
      addEventListener('dragResize');
      innerHtml(
        '<b>BAR</b><br><br>(dynamically created)<br><br>' +
        'child of FOO<br><br>draggable<br>resizeable');
    }
  }  
  // Create an Element as a child of document
  var cod = document.cbe.createElement("DIV");
  if (cod) {
    cod.id = 'COD';
    document.cbe.appendChild(cod);
    with(cod.cbe) {
      color('#ffffff');
      background('#666666');
      resizeTo(300,300);
      moveTo('se');
      show();
      addEventListener('dragResize');
      innerHtml(
        '<b>COD</b><br><br>(dynamically created)<br><br>' +
        'child of document<br><br>draggable<br>resizeable');
    }
  }  
  // Create an Element as a child of COD
  var sok = document.cbe.createElement("DIV");
  if (sok) {
    sok.id = 'SOK';
    cod.cbe.appendChild(sok);
    with(sok.cbe) {
      color('#000000');
      background('#00FF00');
      resizeTo(150,150);
      moveTo('se');
      show();
      addEventListener('dragResize');
      innerHtml(
        '<b>SOK</b><br><br>(dynamically created)<br><br>' +
        'child of COD<br><br>draggable<br>resizeable');
    }
  }  
}