colonymech / docs / www / colonyscout / internal / assembly_add.html @ f59acf11
History | View | Annotate | Download (2.15 KB)
1 | f59acf11 | Dan Shope | |
---|---|---|---|
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 & Remove Elements with JavaScript</h1> |
||
74 | <p id="add-element">Add Elements</p> |
||
75 | <div id="content"></div> |
||
76 | </div>
|
||
77 | </body>
|
||
78 | </html> |