# 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');
        }
      }
    }

FOO
(created by html)
draggable
resizeable