<html>
<head>
  <script type="text/javascript" src="../../base.js"></script>
  <script type="text/javascript" src="../../dom.js"></script>
  <script type="text/javascript" src="../../form.js"></script>
  <script type="text/javascript">
    function test() {
      var type = Form.Element.getValue('type');
      var html = '<div>' + Form.Element.getValue('content') + '</div>';
      new Insertion[type]($('a'), html);
      return false;
    }
  </script>
  
  <style type="text/css">
    div#a {
      border: 2px solid blue;
      padding: 10px;
      margin-bottom: 10px;
    }
    
    div#a div {
      border: 1px solid red;
      padding: 5px;
    }
    
    textarea {
      display: block;
    }
  </style>
</head>
<body>
  <div id="a">
    content
  </div>
  <fieldset>
    <textarea id="content" rows="10" cols="60"></textarea>
    <select id="type">
      <option value="Before">Before</option>
      <option value="Top">Top</option>
      <option value="Bottom">Bottom</option>
      <option value="After">After</option>
    </select>
    <button onclick="return test()">Create Insertion</button>
  </fieldset>
</body>
</html>