Thread: JavaScript Add-Remove HTML Elements with DOM

This JavaScript code example will dynamically add/remove HTML elements with content included within them according to ... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/snippet/javascript-add-remove-html-elements-with-dom.jpg[/IMG]
Demo: JavaScript JavaScript Add-Remove HTML Elements with DOM

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript">
// Created by: Dustin Diaz | hxxp ://w w w.dustindiaz. com/
// This script downloaded from w w w.JavaScriptBank. com

var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
};
var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
        Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
        var f = function() {
          fn.call(Dom.get(el), window.event);
        };
        Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
};
Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {
    var el = document.createElement('p');
    el.innerHTML = 'Remove This Element (' + ++i + ')';
    Dom.add(el, 'content');
    Event.add(el, 'click', function(e) {
      Dom.remove(this);
    });
  });
});
</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

Code:

<div id="doc">

  <p id="add-element">Add Elements</p>
  <div id="content"></div>
</div>

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

Originally Posted by JavaScriptBank

This JavaScript code example will dynamically add/remove HTML elements with content included within them according to ... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/snippet/javascript-add-remove-html-elements-with-dom.jpg[/IMG]
Demo: JavaScript JavaScript Add-Remove HTML Elements with DOM

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript">
// Created by: Dustin Diaz | hxxp ://w w w.dustindiaz. com/
// This script downloaded from w w w.JavaScriptBank. com

var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
};
var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
        Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
        var f = function() {
          fn.call(Dom.get(el), window.event);
        };
        Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
};
Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {
    var el = document.createElement('p');
    el.innerHTML = 'Remove This Element (' + ++i + ')';
    Dom.add(el, 'content');
    Event.add(el, 'click', function(e) {
      Dom.remove(this);
    });
  });
});
</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

Code:

<div id="doc">

  <p id="add-element">Add Elements</p>
  <div id="content"></div>
</div>

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

Hi,
Nice and useful information
Thanks for sharing keep it up