Project

General

Profile

Statistics
| Branch: | Revision:

colonymech / docs / www / colonyscout / internal / assembly_add.html @ f59acf11

History | View | Annotate | Download (2.15 KB)

1

    
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
3
  "http://www.w3.org/TR/html4/strict.dtd"> 
4
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en:us'> 
5
  <head> 
6
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
7
    <title>Add and Remove Elements</title> 
8
    <style type="text/css" media="screen"> 
9
      body {
10
        background: #111;
11
        color: #fff;
12
        font: 100% georgia,times,serif;
13
      }
14
      h1, p {
15
        font-weight: normal;
16
        margin: 0;
17
        padding: 0 0 .5em 0;
18
      }
19
      p {
20
        cursor: pointer;
21
      }
22
    </style> 
23
    <script type="text/javascript"> 
24
      var Dom = {
25
        get: function(el) {
26
          if (typeof el === 'string') {
27
            return document.getElementById(el);
28
          } else {
29
            return el;
30
          }
31
        },
32
        add: function(el, dest) {
33
          var el = this.get(el);
34
          var dest = this.get(dest);
35
          dest.appendChild(el);
36
        },
37
        remove: function(el) {
38
          var el = this.get(el);
39
          el.parentNode.removeChild(el);
40
        }
41
      };
42
      var Event = {
43
        add: function() {
44
          if (window.addEventListener) {
45
            return function(el, type, fn) {
46
              Dom.get(el).addEventListener(type, fn, false);
47
            };
48
          } else if (window.attachEvent) {
49
            return function(el, type, fn) {
50
              var f = function() {
51
                fn.call(Dom.get(el), window.event);
52
              };
53
              Dom.get(el).attachEvent('on' + type, f);
54
            };
55
          }
56
        }()
57
      };
58
      Event.add(window, 'load', function() {
59
        var i = 0;
60
        Event.add('add-element', 'click', function() {
61
          var el = document.createElement('p');
62
          el.innerHTML = 'Remove This Element (' + ++i + ')';
63
          Dom.add(el, 'content');
64
          Event.add(el, 'click', function(e) {
65
            Dom.remove(this);
66
          });
67
        });
68
      });
69
    </script> 
70
  </head> 
71
  <body> 
72
    <div id="doc"> 
73
      <h1>Add &amp; Remove Elements with JavaScript</h1> 
74
      <p id="add-element">Add Elements</p> 
75
      <div id="content"></div> 
76
    </div> 
77
  </body> 
78
</html>