Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: Dynamically add and remove elements Jump to:  
Category: >> JavaScript >> Dynamically add and remove elements Bookmark and Share

<< lastnext >>

Snippet Name: Dynamically add and remove elements

Description: Dynamically create HTML elements with content wrapped within them according to the DOM2 specification.

Also see:
» Dynamically add and remove elements
» Get Current Page URL
» Search array elements for a substring
» Remove Extra Spaces From A String
» Dynamically Add/Remove rows in HTML ta...
» FLASHBACK: Syntax Elements
» Remove Duplicate Lines from a File
» Extract and Display all links on a web...
» Easy page browser
» Create an HTML page on demand
» Page creation time #2
» Page creation time
» Remove all non-ASCII chars
» Find the current URL of the page
» Preview URL/Page On Hover
» Trippy Page
» Remove Duplicates
» Remove extra linebreaks
» Prevent framing a page
» Add/Remove from Select list
» Filter Empty Array Elements
» Set/Get/Remove Cookies

Comment: (none)

Language: JAVASCRIPT
Highlight Mode: HTML4STRICT
Last Modified: May 28th, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Add and Remove Page Elements</TITLE>
<STYLE TYPE="text/css">
#add-element {
  cursor: pointer;
}
</STYLE>
 
<SCRIPT TYPE="text/javascript">
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>
</HEAD>
 
<BODY>
 
<DIV ID="doc">
  <P ID="add-element">Click To Add An Element</P>
  <DIV ID="content"></DIV>
</DIV>
 
</BODY>
</HTML>
 


Free
Oracle Magazine
Subscriptions
and Oracle White Papers


SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more
 
Home      :      Code Library      :      Sponsors      :      Privacy      :      Terms of Use      :      Contact Us 56 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?