Reusable add/del element functions w/insertAfter JavaScript

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Reusable add/del element functions w/insertAfter JavaScript

Post 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>
Post Reply