Page 1 of 1

Reusable add/del element functions w/insertAfter JavaScript

Posted: Mon Sep 22, 2008 9:46 am
by JAB Creations
Most of what I have to say about this is on my blog here...
http://www.jabcreations.com/blog/reusab ... nsertafter

Essentially the element_add function requires an existing ID as a reference and then requires a relative position: after, before, or inside. The after bit was what the internet was sorely lacking.

You can test drive the page here...
http://www.jabcreations.com/web/javascript/elements.php

Here is the source code as posted on my blog. Your thoughts are welcomed. :)

Code: Select all

<?php
$mime = (stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) ? "application/xhtml+xml" : "text/html";
header("content-type:$mime;charset=$charset");
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Reusable create, delete, and toggle element functions</title>
<script type="text/javascript">
//<![CDATA[
// Create Element by ID
function element_add(new_position, this_node, new_element, new_element_id, new_element_class, new_element_text)
{
 var element_new = document.createElement(new_element);
 if (!document.getElementById(new_element_id)) {element_new.setAttribute('id', new_element_id);} else {alert('ERROR! An element with the id of \'' + new_element_id + '\' already exists!'); return;}
 if (new_element_class != undefined) {element_new.setAttribute('class', new_element_class);}
 if (new_element_text != undefined) {var element_new_content = document.createTextNode(new_element_text); element_new.appendChild(element_new_content);}
 
 // Add element AFTER ID.
 if (new_position == 'after')
 {
  this_node = document.getElementById(this_node);
  if (this_node.nextSibling) {this_node.parentNode.insertBefore(element_new, this_node.nextSibling);}
  else {this_node.parentNode.appendChild(element_new);}
 }
 // Add element BEFORE ID.
 else if (new_position == 'before')
 {
  document.getElementById(this_node).parentNode.insertBefore(element_new, document.getElementById(this_node));
 }
 // Add element INSIDE ID.
 else if (new_position == 'inside')
 {
  document.getElementById(this_node).appendChild(element_new);
 }
 else {alert('ERROR: Third parameter must be \'after\', \'before\', or \'inside\'.');}
}
 
// Delete Element by ID
function element_del(element_id)
{
 if (document.getElementById(element_id))
 {
  document.getElementById(element_id).parentNode.removeChild(document.getElementById(element_id));
 }
 else
 {
  alert('ERROR: No element with the id \'' + element_id + '\' exists!');
 }
}
 
// Toggle element by ID, call function just like you call element_add with parameters!
function element_tog(new_position, this_node, new_element, new_element_id, new_element_class, new_element_text)
{
 if (!document.getElementById(new_element_id)) {javascript&#058;element_add(new_position, this_node, new_element, new_element_id, new_element_class, new_element_text);}
 else if (document.getElementById(new_element_id)) {element_del(new_element_id);}
}
//]]>
</script>
<style type="text/css">
#content {float: right; width: 64%;}
#content div {border: #000 dotted 1px; clear: both; margin: 2px; padding: 2px;}
#content div.css_class_after {background-color: #ffc; margin: 2px 2px 2px 60px;}
#content div.css_class_before {background-color: #fcf; float: left; margin: 2px;} 
#content div.css_class_inside {background-color: #cff; margin: 10px;}
#menu_add {float: left; width: 12%;}
#menu_del {float: left; width: 12%;}
#menu_tog {float: right; width: 12%;}
h1, h2 {font-size: 17px; margin: 2px;}
</style>
</head>
 
<body>
 
<h1 id="head1">JavaScript reusable element add and delete functions example page by <a href="http://www.jabcreations.com/blog/reusable-element-add-and-delete-functions-with-insertafter">John A. Bilicki III</a></h1>
<div>
 <p>The three reusable functions <em>element_add</em>, <em>element_del</em>, and <em>element_tog</em> on this page will allow you to easily add elements, delete elements, and toggle between adding and deleting them.
 &#160; The main benefit is that the <em>element_add</em> function allows you to add an element after, before, or inside of a reference element.</p>
 
 <p>The <em>element_add</em> function's first parameter let's you choose to create the new element after, before, or inside of the reference element which is the second parameter and must already exist.
 &#160; The third parameter is the element such as a div or a span.
 &#160; The fourth parameter is the id, the fifth an optional class, and the sixth optional text (which in the <abbr title="Document Object Modle">DOM</abbr> is referenced as <em>nodeValue</em>.
 &#160; You can access/alert a nodevalue in this <a href="javascript&#058;alert(document.getElementById('head1').firstChild.nodeValue);" tabindex="1">example</a> which will alert the nodeValue of the primary header element on this page).</p>
 
 <p>The <em>element_add</em> function only requires the id of the element you wish to delete.
 &#160; The <em>element_tog</em> however requires all the parameters you want to pass to the <em>element_add</em>.</p>
 
 <p>The functions will work in Internet Explorer 5.5 but not 5.0 however the class attribute if set is not applied except in Internet Explorer 8.0 and higher.
 &#160; Gecko 1.0+ works, classes are applied on at least Gecko 1.6+.
 &#160; The functions and class attributes also work in Opera 7 and Safari 3.</p>
</div>
 
<div id="content">
<div id="el1">element 1</div>
<div id="el2">element 2</div>
<div id="el3">element 3</div>
<div id="el4">element 4</div>
<div id="el5">element 5</div>
<div id="el6">element 6</div>
<div id="el7">element 7</div>
<div id="el8">element 8</div>
</div><!-- /#content -->
 
<div id="menu_add">
<h2>Create Elements</h2>
<div><a href="javascript&#058;element_add('after','el1','div','example_id_a1','css_class_after','New element after el1.');" tabindex="1">After element 1</a></div>
<div><a href="javascript&#058;element_add('after','el2','div','example_id_a2','css_class_after','New element after el2.');" tabindex="1">After element 2</a></div>
<div><a href="javascript&#058;element_add('after','el3','div','example_id_a3','css_class_after','New element after el3.');" tabindex="1">After element 3</a></div>
<div><a href="javascript&#058;element_add('after','el4','div','example_id_a4','css_class_after','New element after el4.');" tabindex="1">After element 4</a></div>
<div><a href="javascript&#058;element_add('after','el5','div','example_id_a5','css_class_after','New element after el5.');" tabindex="1">After element 5</a></div>
<div><a href="javascript&#058;element_add('after','el6','div','example_id_a6','css_class_after','New element after el6.');" tabindex="1">After element 6</a></div>
<div><a href="javascript&#058;element_add('after','el7','div','example_id_a7','css_class_after','New element after el7.');" tabindex="1">After element 7</a></div>
<div><a href="javascript&#058;element_add('after','el8','div','example_id_a8','css_class_after','New element after el8.');" tabindex="1">After element 8</a></div>
 
<div><a href="javascript&#058;element_add('before','el1','div','example_id_b1','css_class_before','New element before el1.');" tabindex="1">Before element 1</a></div>
<div><a href="javascript&#058;element_add('before','el2','div','example_id_b2','css_class_before','New element before el2.');" tabindex="1">Before element 2</a></div>
<div><a href="javascript&#058;element_add('before','el3','div','example_id_b3','css_class_before','New element before el3.');" tabindex="1">Before element 3</a></div>
<div><a href="javascript&#058;element_add('before','el4','div','example_id_b4','css_class_before','New element before el4.');" tabindex="1">Before element 4</a></div>
<div><a href="javascript&#058;element_add('before','el5','div','example_id_b5','css_class_before','New element before el5.');" tabindex="1">Before element 5</a></div>
<div><a href="javascript&#058;element_add('before','el6','div','example_id_b6','css_class_before','New element before el6.');" tabindex="1">Before element 6</a></div>
<div><a href="javascript&#058;element_add('before','el7','div','example_id_b7','css_class_before','New element before el7.');" tabindex="1">Before element 7</a></div>
<div><a href="javascript&#058;element_add('before','el8','div','example_id_b8','css_class_before','New element before el8.');" tabindex="1">Before element 8</a></div>
 
<div><a href="javascript&#058;element_add('inside','el1','div','example_id_i1','css_class_inside','New element inside el1.');" tabindex="1">Inside element 1</a></div>
<div><a href="javascript&#058;element_add('inside','el2','div','example_id_i2','css_class_inside','New element inside el2.');" tabindex="1">Inside element 2</a></div>
<div><a href="javascript&#058;element_add('inside','el3','div','example_id_i3','css_class_inside','New element inside el3.');" tabindex="1">Inside element 3</a></div>
<div><a href="javascript&#058;element_add('inside','el4','div','example_id_i4','css_class_inside','New element inside el4.');" tabindex="1">Inside element 4</a></div>
<div><a href="javascript&#058;element_add('inside','el5','div','example_id_i5','css_class_inside','New element inside el5.');" tabindex="1">Inside element 5</a></div>
<div><a href="javascript&#058;element_add('inside','el6','div','example_id_i6','css_class_inside','New element inside el6.');" tabindex="1">Inside element 6</a></div>
<div><a href="javascript&#058;element_add('inside','el7','div','example_id_i7','css_class_inside','New element inside el7.');" tabindex="1">Inside element 7</a></div>
<div><a href="javascript&#058;element_add('inside','el8','div','example_id_i8','css_class_inside','New element inside el8.');" tabindex="1">Inside element 8</a></div>
</div><!-- /#menu_add -->
 
<div id="menu_del">
<h2>Delete Elements</h2>
<div><a href="javascript&#058;element_del('example_id_a1');" tabindex="1">After element 1</a></div>
<div><a href="javascript&#058;element_del('example_id_a2');" tabindex="1">After element 2</a></div>
<div><a href="javascript&#058;element_del('example_id_a3');" tabindex="1">After element 3</a></div>
<div><a href="javascript&#058;element_del('example_id_a4');" tabindex="1">After element 4</a></div>
<div><a href="javascript&#058;element_del('example_id_a5');" tabindex="1">After element 5</a></div>
<div><a href="javascript&#058;element_del('example_id_a6');" tabindex="1">After element 6</a></div>
<div><a href="javascript&#058;element_del('example_id_a7');" tabindex="1">After element 7</a></div>
<div><a href="javascript&#058;element_del('example_id_a8');" tabindex="1">After element 8</a></div>
<div><a href="javascript&#058;element_del('example_id_b1');" tabindex="1">Before element 1</a></div>
<div><a href="javascript&#058;element_del('example_id_b2');" tabindex="1">Before element 2</a></div>
<div><a href="javascript&#058;element_del('example_id_b3');" tabindex="1">Before element 3</a></div>
<div><a href="javascript&#058;element_del('example_id_b4');" tabindex="1">Before element 4</a></div>
<div><a href="javascript&#058;element_del('example_id_b5');" tabindex="1">Before element 5</a></div>
<div><a href="javascript&#058;element_del('example_id_b6');" tabindex="1">Before element 6</a></div>
<div><a href="javascript&#058;element_del('example_id_b7');" tabindex="1">Before element 7</a></div>
<div><a href="javascript&#058;element_del('example_id_b8');" tabindex="1">Before element 8</a></div>
<div><a href="javascript&#058;element_del('example_id_i1');" tabindex="1">Inside element 1</a></div>
<div><a href="javascript&#058;element_del('example_id_i2');" tabindex="1">Inside element 2</a></div>
<div><a href="javascript&#058;element_del('example_id_i3');" tabindex="1">Inside element 3</a></div>
<div><a href="javascript&#058;element_del('example_id_i4');" tabindex="1">Inside element 4</a></div>
<div><a href="javascript&#058;element_del('example_id_i5');" tabindex="1">Inside element 5</a></div>
<div><a href="javascript&#058;element_del('example_id_i6');" tabindex="1">Inside element 6</a></div>
<div><a href="javascript&#058;element_del('example_id_i7');" tabindex="1">Inside element 7</a></div>
<div><a href="javascript&#058;element_del('example_id_i8');" tabindex="1">Inside element 8</a></div>
</div><!-- /#menu_del -->
 
<div id="menu_tog">
<h2>Toggle Elements</h2>
<div><a href="javascript&#058;element_tog('after','el1','div','example_id_a1','css_class_after','New element after el1.');" tabindex="1">After element 1</a></div>
<div><a href="javascript&#058;element_tog('after','el2','div','example_id_a2','css_class_after','New element after el2.');" tabindex="1">After element 2</a></div>
<div><a href="javascript&#058;element_tog('after','el3','div','example_id_a3','css_class_after','New element after el3.');" tabindex="1">After element 3</a></div>
<div><a href="javascript&#058;element_tog('after','el4','div','example_id_a4','css_class_after','New element after el4.');" tabindex="1">After element 4</a></div>
<div><a href="javascript&#058;element_tog('after','el5','div','example_id_a5','css_class_after','New element after el5.');" tabindex="1">After element 5</a></div>
<div><a href="javascript&#058;element_tog('after','el6','div','example_id_a6','css_class_after','New element after el6.');" tabindex="1">After element 6</a></div>
<div><a href="javascript&#058;element_tog('after','el7','div','example_id_a7','css_class_after','New element after el7.');" tabindex="1">After element 7</a></div>
<div><a href="javascript&#058;element_tog('after','el8','div','example_id_a8','css_class_after','New element after el8.');" tabindex="1">After element 8</a></div>
 
<div><a href="javascript&#058;element_tog('before','el1','div','example_id_b1','css_class_before','New element before el1.');" tabindex="1">Before element 1</a></div>
<div><a href="javascript&#058;element_tog('before','el2','div','example_id_b2','css_class_before','New element before el2.');" tabindex="1">Before element 2</a></div>
<div><a href="javascript&#058;element_tog('before','el3','div','example_id_b3','css_class_before','New element before el3.');" tabindex="1">Before element 3</a></div>
<div><a href="javascript&#058;element_tog('before','el4','div','example_id_b4','css_class_before','New element before el4.');" tabindex="1">Before element 4</a></div>
<div><a href="javascript&#058;element_tog('before','el5','div','example_id_b5','css_class_before','New element before el5.');" tabindex="1">Before element 5</a></div>
<div><a href="javascript&#058;element_tog('before','el6','div','example_id_b6','css_class_before','New element before el6.');" tabindex="1">Before element 6</a></div>
<div><a href="javascript&#058;element_tog('before','el7','div','example_id_b7','css_class_before','New element before el7.');" tabindex="1">Before element 7</a></div>
<div><a href="javascript&#058;element_tog('before','el8','div','example_id_b8','css_class_before','New element before el8.');" tabindex="1">Before element 8</a></div>
 
<div><a href="javascript&#058;element_tog('inside','el1','div','example_id_i1','css_class_inside','New element inside el1.');" tabindex="1">Inside element 1</a></div>
<div><a href="javascript&#058;element_tog('inside','el2','div','example_id_i2','css_class_inside','New element inside el2.');" tabindex="1">Inside element 2</a></div>
<div><a href="javascript&#058;element_tog('inside','el3','div','example_id_i3','css_class_inside','New element inside el3.');" tabindex="1">Inside element 3</a></div>
<div><a href="javascript&#058;element_tog('inside','el4','div','example_id_i4','css_class_inside','New element inside el4.');" tabindex="1">Inside element 4</a></div>
<div><a href="javascript&#058;element_tog('inside','el5','div','example_id_i5','css_class_inside','New element inside el5.');" tabindex="1">Inside element 5</a></div>
<div><a href="javascript&#058;element_tog('inside','el6','div','example_id_i6','css_class_inside','New element inside el6.');" tabindex="1">Inside element 6</a></div>
<div><a href="javascript&#058;element_tog('inside','el7','div','example_id_i7','css_class_inside','New element inside el7.');" tabindex="1">Inside element 7</a></div>
<div><a href="javascript&#058;element_tog('inside','el8','div','example_id_i8','css_class_inside','New element inside el8.');" tabindex="1">Inside element 8</a></div>
</div><!-- /#menu_tog -->
 
</body>
</html>